I have input field with large padding. When it is focused or contains value padding is changed and this change is animated with css3 transition: all 0.5s; problem is that in chrome for transition duration element height changes from 42px to 41.998px and chrome renders that as 41px causing content to jump up by 1px during animation.
input {
padding: 10px;
transition:all 0.5s;
}
input:focus {
padding: 20px 10px 0;
outline:none;
}
<input type="text">
What's happening here is that you're actually animating 2 properties; padding-top is transitioning from 10px to 20px and padding-bottom is transitioning from 10px to 0px. Depending on various factors, your browser may struggle to animate both properties at exactly the same time - especially when the transition-property is set to all - leading to some "flickering" in the element's height as, currently, its height is calculated by adding together the line-height, padding and border.
One way to get around this would be to give the element a specific height so that that value does not have to be calculated at each stage during the transition.
input{
border:1px solid #999;
box-sizing:border-box;
height:42px;
line-height:20px;
outline:0;
padding:10px;
transition:padding .5s;
}
input:focus{
padding:20px 10px 0;
}
<input>
Related
The existing questions do not cover this case. Height transition is not working when the text creates more rows. That's probably because I set no height, but I want't to keep changing it according to the text size. How can I create a smooth transition effect?
.content{
border: 1px solid blue;
min-height:30px;
width:120px;
transition: height 1s ease;
}
<div contenteditable="true" class="content">Type more...</div>
I've got (hopefully) a simple CSS problem, that I cannot get working.
If you go to http://new.therepairshack.com and take a look at the top search bar.
When you hover over it, it resizes to content width.
The CSS for this is here:
.header .search-wrapper .form-search .input-text {
background:rgba(0,0,0,0);
color:#000;
border-radius:0px;
border-bottom:1px solid #444;
}
.header .search-wrapper:hover,
.header .search-wrapper:hover .form-search,
.header .search-wrapper:hover form,
.header .search-wrapper:hover .input-text {
width:100%;
font-size:45px;
height:100px;
}
.header .search-wrapper,
.header .search-wrapper form,
.header .search-wrapper .form-search,
.header .search-wrapper .input-text {
transition: all 1.0s ease;
-webkit-transition: all 1.0s ease;
display:block;
}
Right now we're working on getting this functionality working in Chrome and Firefox. When I view it in chrome the background div instantly jumps to a larger height to fit the resized search bar, but when it resizes back down after you've left hover it does it smoothly.
My question: Is there any way to make the jumping go away? It's driving me nuts. I have added a transition to all of the elements that are moving when the search bar is being resized and that isn't working.
Also, what is the best way to get this working properly in other browsers? Thanks!!!
Let me know if you need anymore information!
It can't transition from an undefined starting point.
You must either
Specify an initial height on your .search-wrapper
http://jsfiddle.net/5h69j6uq/
Or, if your content must be dynamically sized, set the updated height by using the min-height: 100px property rather than the height: 100px property. min-height has a default value of 0 and will thus transition from that defined default value to 100px
http://jsfiddle.net/8t1beeLo/
You will have to manually set the height on the .header-top-container class and adjust it accordingly for the hover state.
CSS by standard will only apply animations to elements that are defined in rules to have them applied. And furthermore transitions will only be applied when there is a starting and end result, so inferred values such as height and width will not be animateable. Noticed I didn't say inherited values, as those technically have a starting value and therefore are animateable.
So for your CSS, you'll want something to this effect:
.header-top-container {
transition: height 1.0s ease;
-webkit-transition: height 1.0s ease;
height: 50px; /* change to whatever your height should be */
}
.header-top-container:hover {
height: 100px; /* the new height of the background */
}
I have a div with a letter :
HTML
<div>A</div>
CSS
div {
border: 1px solid black;
background-color: #CC0000;
width: 150px;
height: 150px;
margin: 10px 5px 5px 50px;
padding: 0px 30px 0px 10px /* I want to move my letter with it */
}
The letter moves due to padding property, but it also makes the square larger.
Why does padding transform the square into a rectangle?
JSF : http://jsfiddle.net/fnBaD/1
The standard 'box model' does NOT include padding/borders into width/height calculations
By adding the box-sizing:border-box property it will force the browser to INCLUDE the padding/borders in the dimensions
It's often seen in a universal selector
* {
box-sizing:border-box;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Padding is always applied 'within' the element. Hence,
padding:5px;
is effectively adding 5px on all four sides 'within' an element.
Hence, the padding property makes elements larger.
Padding is considered to be part of the element it is applied to. This is why the element gets larger.
I want to make the padding Opaque, but opacity isn't working.
body {
background-image:url(http://i.imgur.com/apKZRmj.png);
font-family:Helvetica;
color:lightgrey;
font-size: 16px;
align:center;
padding: 20px 0;
}
Why won't this work?
according to W3 schools
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
so basically it has no color property to make it an opaque or adding some opacity, I think what you need is 'border'
ex.
border: 20px solid #000;
JSfiddle: http://jsfiddle.net/bJ2CF/2/
use background color , The padding clears an area around the content
I'm trying to create a cool css3 effect where by when you hover over an image a border comes out from the middle of the image slowly. To do so I have a transparent border and then show the border and apply padding on hover, but when I add the padding it moves the image. Is there a way to keep the image from moving and still have the padding added on hover?
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
}
img{
position: absolute;
left:64%;
margin-left:-128px;
border:solid 3px transparent;
border-radius: 80px;
transition-duration: 1s;
-webkit-transition-duration: 1s; /* Safari */
}
Example - http://jsfiddle.net/kqWZZ/1/
You need to displace the padding added on hover.
It seems as though the best approach is to add a margin initially and then remove it on hover.
jsFiddle example
#dev {
margin:10px;
}
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
margin:0;
}
This essentially displaces the 10px of padding.
For positioning purposes, I changed left:64% to left:33%.
You also add a padding on hover, which moves the image. So either add the padding also to the image without hover, or dont add any padding at all.
Why not transfer the padding attribute on the image itself but not on its hovering state?
I edited your fiddle. Check it here
img{
padding:10px;
....
}