Fixed width element with variable width input

Question

Your probably going to say this has been asked before but this is a variation with a bug. So we are all aware of the technique used to answer this question: Fixed width div on left, fill remaining width div on right

However this does not work if the variable width element is an input tag.

http://jsfiddle.net/8pk4K/2050/

even overriding the inputs default css doesnt fix this:

display: block;
overflow:hidden; 
background-color:green;
height: 100px;
width: auto;

Iv been playing with this for ages, it only happens on input tags, if you replace it with a span (default display inline but set it to display block) it still works.

Any idea why this only doesnt work for input tags and nothing else?

EDIT: For clarification, I know that the fix for this is to put the input into a div and apply width 100% to the input. My question is why this is necessary, not how to fix it.

You can use calc to produce what you desire width: calc(100% - 240px); — Luís P. A., Apr 16 '15 at 10:28

score 2 · Answer 1 · answered Apr 16 '15 at 10:30

I know the problem, styling form elements will always be a pain in the ass.

I've came up with this work around, by wrapping the input in the right div.

<div class="header"></div>
<div class="header-right">
    <input type="text" />
</div>

.header{
    float:left;
    background: #efefef;
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    overflow:hidden; 
    background-color:#000;
    height: 100px;
    position: relative;
    }
.header-right input {
    background: green;
    position: absolute;
    width: 100%;
    height: 100%;
}

JSFiddle

thanks, I actually already know the fix for this I just dont understand why this is necessary — Mike Oram, Apr 16 '15 at 10:41

Luís P. A. · Accepted Answer · 2015-04-16T10:54:52.997

1

You can use calc to produce the width what you desire because inputs are replaced elements that have intrinsic dimensions just like images

CSS

.header-right{
    display: block;
    overflow:hidden; 
    background-color:green;
    height: 100px;
    border: none;
    width: calc(100% - 240px); //Add this
    }

Note: You must give a dimension (width) to the select or otherwise give you the default browser width

DEMO HERE

edited Apr 16 '15 at 10:54

answered Apr 16 '15 at 10:30

Luís P. A.

9,524
2
23
36

Mind the browser support, since it's an experimental technology... https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility – GreyRoofPigeon Apr 16 '15 at 10:32
@ LinkinTED Just check - http://caniuse.com/#search=calc ... I think that most modern browser support it. It´s safe. – Luís P. A. Apr 16 '15 at 10:36
P.A.: at least all the latest version do (except Opera Mini), and imo you should always keep your software updated... so I'm with you on this one! – GreyRoofPigeon Apr 16 '15 at 10:38
this is a nice fix, however i am not after a fix, I am just curious why input does not behave in the expected manor – Mike Oram Apr 16 '15 at 10:44
1

@MikeOram, Inputs are replaced elements have intrinsic dimensions just like images..I add a note in my answer – Luís P. A. Apr 16 '15 at 10:47
can you elaborate on this? add it as an answer so I can accept it (as you have actually answered the question lol) – Mike Oram Apr 16 '15 at 10:50
what do you mean by intrinsic dimensions? – Mike Oram Apr 16 '15 at 10:53
1

So..it´s simple...you must give a dimension (width) to the select or otherwise give you the default browser width. – Luís P. A. Apr 16 '15 at 10:54
but surely applying width: auto should override the browser default and so fill the space. or does auto just inherit the browser default? – Mike Oram Apr 16 '15 at 10:56
input will not recognize with:auto, its not a real dimension..because of that when we put width:auto we got the default dimension – Luís P. A. Apr 16 '15 at 11:04

score -1 · Answer 3 · answered Apr 16 '15 at 10:29

-1

Try adding width in % for both .header and .header-right. Like

.header{
width:20%;
}
.header-right{
width:80%;
}

answered Apr 16 '15 at 10:29

kishan

301
3
12

this is neither what i asked or the solution – Mike Oram Apr 16 '15 at 10:40

Fixed width element with variable width input

3 Answers3