Strange behaviour when absolute positioning an INPUT with both left and right CSS properties

Question

I'm studying the CSS formatting of an absolutely positioned <input>. I'd like it to "stretch" inside its container (which is also positioned "absolute") so that it leaves for instance 30px both left and right, and fills all the space within...

I already found a sample on w3.org site, which uses both left and right to create a kind of "frameset" in CSS.

I also read an article from A-List-Apart talking about this kind of technique and found several other questions here dealing similar troubles, but none of these focuses the specific issue I'm going to describe. I also found that I can wrap the inner <input> with a <div>, but I'd like to dig a bit more on this subject to understand why it is misbehaving...

Here is a working sample I made to test and clarify the idea. In short it is something as simple as this:

<div id="sidebar">
  <input type="text" value="input" />
</div>

with a style like this:

body { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 160px;
}
#sidebar input {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
    width: auto;
}

The interesting point is on the last three lines, when I set left and right and leave width as "auto".

The outcome is that it only works as expected using Chrome (v.26), but in FF.20 or IE.10 it looks broken: the <input> extends beyond the right margin of its container div.. much the same you get when putting width:100% and only settings left position...

The funny part is that this approach with DIVs and inline-block SPANs works as expected across all three browsers.

Is it a bug on browsers' side? Is there a way to make it work without the workaround to enclose <input> with width:100% inside another <div> positioned in the described way?

Hope that someone has a clue on this.

PS: I'm focusing on "modern", html5 browsers, so I don't mind if it won't work on IE8 or older..

Answer 1

Observations

I'm surprised by this behavior. top-right-bottom-left absolute positioning works marvelously (and has for years) but it's ignored by IE 10 and FF on input type="text"

Red herring: your approach does work with input type="range" but not input type="number" in IE 10. Perhaps this is related to which inputs the browser takes sole responsibility for drawing, versus those inputs that may thinly wrap functionality already provided by the OS.

In FF (PC/Mac) I observed that the size property of the input seems to override anything but an explicit width assignment. For example, setting size=4 will make the input more narrow than desired. The observed width seems to be the result of an implicit size=20 value.

Workarounds

All that said, I do have a potential solution which doesn't require extensive changes to your code and works in IE9/10, FF (PC/Mac), Chrome (PC/Mac) and Safari (Mac).

Demo: http://jsfiddle.net/ws9hf/13/

#sidebar .x {
    position: absolute;
    box-sizing: border-box;
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    left: 30px;
    right: 30px; /* fallback */
}

This uses the cacl() function which has decent browser support. It's worth noting that this feature is deemed "at risk" by the W3, so its future may be uncertain.

As "cool" as the calc() function is—being pragmatic—I'd probably wrap the offending input(s) in another element and be done with it. You'll achieve wider browser support, and future compatibility.

Answer 2

You can wrap the input inside a container div, and perform the styling on that div.

here is an example

<div id="sidebar">
     <div id="inputContainer">
         <input type="text" value="input" />
     </div>
</div>

body { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 160px;
}
#sidebar #inputContainer {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
}
#inputContainer{
    width: 100%;
}