CODEWITHSUNDEEP
cssfirefox
Mark
Mark

Reputation: 121

Getting Firefox to stretch an input properly

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?

Upvotes: 11

Views: 4037

Answers (5)

alex
alex

Reputation: 490283

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

Example

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

Upvotes: 7

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 1

Dawson
Dawson

Reputation: 7597

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/

Upvotes: 3

clairesuzy
clairesuzy

Reputation: 27624

It seems -moz-calc would work, but only in FF4.

As you said you don't want wrapper spans or divs. There's a slightly hacky way in this jsfiddle

Summary: Change the box-sizing model to contain borders and padding, then add the 100px as left padding so the input text value moves over but the width stays at 100%; - then clip the input to chop off the extra left bit and show the title text again. Only problem is, there's no left border, I tried to add a fake one with a pseudo element.. needless to say the fake border doesn't work in IE8 and none of it works in IE7

Update

updated code to use a background image which now gives a border effect in IE too ==> jsfiddle

Upvotes: 0

mingos
mingos

Reputation: 24502

I came up with two solutions:

I hope it's of use.

Upvotes: 1

Related Questions