Getting Firefox to stretch an input properly

Question

This is a simplified version of something I'm trying to do. Works in every browser other than FF:

http://jsfiddle.net/hDFnW/10/

Basically, I'm trying to get an input to apply width:auto; when position:absolute;left:200px;right:0px is set.

It works on anything other than an input... I'm rather confused right now.

How can I accomplish this in Firefox, or better yet, across all browsers?

Answer 1

You can wrap the input with a div and then it works.

CSS

div {
    display    : block;
    position   : absolute;
    left       : 100px;
    right      : 0px;
    top        : 3px;
}

input {
    width      : 100%;  
    border     : 1px solid #000;
    background : #FFF;
}

jsFiddle using other examples.

jsFiddle all working.

Example

You can get a similar effect (albeit not the same however) using floats.

Answer 2

Very simple fix...no wrapping required. IE, Chrome, FF - all good.

http://jsfiddle.net/LGn9A/1/

don't mix the pixels w/ percentages :-) (in this case)

ul {
    width       : 95%; /* here */
    font        : 12px/1.4 tahoma; /* global aethetics */
    ....
}

li { ... }

input, span {
    display    : block;
    position   : absolute;
    left       : 20%; /* here */
    right      : 0px;
    width      : 80%; /* and here */
}

FF-- will cooperate using white-space:nowrap; works in IE, and Chrome as well.

<li>Title
    <span style="border:0px">
        <input style="width:100%;left:0px;white-space:nowrap;">
    </span>
</li>

http://jsfiddle.net/hDFnW/16/

Answer 3

I came up with two solutions:

• http://jsfiddle.net/w6fGY/ - fixed width for <span> and <input>
• http://jsfiddle.net/B4MKu/ - all <input>s wrapped in <span> and width:100%.

I hope it's of use.

Answer 4

A simple solution to this problem is to use position:relative on input and assign its left position and width value using percentage and not px. That's because parent ul width is specified in percentage and not px. Otherwise the solution would be easy if a fixed width was given to the ul element

<ul>
    <li>Title<input></li>
    <li>Title<input></li>
</ul>

ul {
    width       : 95%;
    border      : 1px solid #000;
    font-family : tahoma;
    padding     : 5px;
    position:relative;
}

li {    
    background-color : #EEE;
    margin           : 2px;
    padding          : 3px;
}

input {     
    position:relative;
    left:20%;
    width:75%; /* I used 75% to give an extra 5% room for paddings and margins specified by parent elements ex: li ul) */
}

Check working example at http://jsfiddle.net/t5CvC/1/