Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome CSS issue with absolute positioned input elements inside of relative parents (Chrome 32.0.1700.77) right: 0 not working

I just noticed this issue after an auto update to Chrome 32.0.1700.77. I can set top, left, and bottom in an absolutely-positioned input element, however right: 0 is ignored. Here's my code:

<div id="content">
    <input type="search"/>
</div>

#content {
    position: relative;
    top: 24px;
    height: 24px;
    background-color: gray;
}

#content input[type="search"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width 100%; */
}

Fiddle: http://jsfiddle.net/hAuSL/4/

It was working as expected before the update. I also see this issue in Firefox (26.0) but not in Opera (18.0.1284.68) or Safari (7.0.1 (9537.73.11)).

I can work around it by adding width: 100% to the input element style; but I'm wondering, is there something wrong with the CSS or is this a browser issue?

Thanks in advance for any insights.

like image 357
t.888 Avatar asked Jan 16 '14 22:01

t.888


People also ask

How do I fix relative position in CSS?

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

Does margin auto work with position absolute?

If the element is position absolutely, then it isn't relative, or in reference to any object - including the page itself. So margin: auto; can't decide where the middle is.

Does Z-Index work with position absolute?

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Why my Z-index is not working?

You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.


1 Answers

It's not a bug, see how absolutely positioned replaced elements' width is computed:

http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

The used value of 'width' is determined as for inline replaced elements.

http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.

At this point the element dimensions are over-constrained (it has width, left and right) so the following rule applies:

ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

It's what you see, right is ignored. As <input> always have a default width you should set yours (100% in this case) and remove the right rule.


For a more generic solution you can wrap the replaced element in any non-replaced element (like a <div>) which will be absolutely positioned with left and right, then you can set the wanted width for the other element (be careful, if the box-model is content-width the width value will be added to any padding and border).

See http://jsfiddle.net/2UaYm/ for example.

like image 148
MatTheCat Avatar answered Oct 05 '22 20:10

MatTheCat