CODEWITHSUNDEEP
htmlcss
Drahcir
Drahcir

Reputation: 11972

Input in div container, won't stretch

I have a div containing an input. I want the input to stretch to fill the available space, this works in Chrome but not IE and Firefox.

<div class="outer">
    <input type="text" />
</div>

.outer{
    width: 100%;
    height: 40px;

    position: relative;
}

input{
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: 7px;
}

JSFiddle: http://jsfiddle.net/wwMZg/1/

In Chrome it appears like this: Chrome Screenshot

In Firefox and IE it appears like this: IE Screenshot

Upvotes: 2

Views: 3265

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

Controlling the stretching and height of an input element

This styling problem is a bit intriguing since the input element seems to have its own set of rules.

Consider the following HTML:

<div class="outer">
    <div class="inner">
        <input type="text" />
    </div>
</div>

and the CSS:

.outer {
    width: 100%;
    font-size: 20px;
    background-color: green;
    overflow: auto;
}
.inner {
    margin: 7px;
}
input {
    font-size: inherit;
    width: 100%;
    border: none;
}

Wrapping the input field in the .inner element allows it to expand to 100% without triggering horizontal overflow on the top level container.

However, the margins will not be fully symmetric unless you set border: none on the input field. This could be fixed using box-sizing to deal with the width of the borders.

With respect to the height property, input behaves like a regular inline, non-replaced element, that is, the height value does not apply and you need to use the font-size to get some control over the height.

See demo at jsFiddle

Upvotes: 0

Robert Byrne
Robert Byrne

Reputation: 560

If you cant use box-sizing because you need to support older browsers, and don't mind adding another element to the markup, you can use an intermediate div

CSS

.outer{
    width: 100%;
    height: 40px; 
    position: relative;
}

.inner {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: 7px;    
}

input{
    width: 100%;
}

HTML

<div class="outer">
    <div class="inner">
        <input type="text" />
    </div>
</div>

Fiddle: http://jsfiddle.net/2mFgR/

Upvotes: 2

Rob
Rob

Reputation: 10248

add width:100% to your input style

    .outer{
    width:100%;
    height: 40px;
    position:absolute;
 }

input{
    position:relative;
    top: 7px;
    bottom: 7px;
    width:100%;
    padding:0px;
    margin-left:-1px;
    border:1px solid gray;
}

It's the border that's offsetting it in IE

Upvotes: -2

cimmanon
cimmanon

Reputation: 68319

Most input elements have padding/borders on them. You need to use the box-sizing property to adjust how the element dimensions are calculated.

http://jsfiddle.net/wwMZg/5/

.outer {
    width: 100%;
    height: 40px;
}
.outer input {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://caniuse.com/#search=box-sizing

Upvotes: 4

Related Questions