Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to style a text input to fill the width of it's parent?

Tags:

I have had this issue for years and I've seen similar questions before, but none of them have addressed the fact that when setting width: 100% on an element - paddings, margins and borders will increase the width.


Have a look at this Fiddle.

The white topmost text box is a standard text box with it's width set to 100%. As you can see it overflows it's parent because of the margin, padding and border settings.

The green text box is styled like a div using position: absolute. This works like a dream in webkit browsers but nowhere else.

The red div is the control - I want the input to act just like that.


Are there any hacks/tricks I can employ to have my text inputs act just like the red div in all modern browsers, in other words, fit inside the padding of the parent? Please edit my Fiddle or create your own to accompany your answer. Thanks!

like image 389
Hubro Avatar asked Jul 30 '12 22:07

Hubro


People also ask

How do you change the input width of text?

Set width with JavaScript With JavaScript, you can use the setAttribute() method to set the value of the size attribute on the input text box. You can also dynamically change the width of a text box to match the length of the input. We can easily do this by setting the size attribute on key events.

How do I make input width fit content?

Use the span. text to fit width of text, and let the input have same size with it by position: absolute to the container.


2 Answers

You can:

input#classic {     width: 100%;     padding: 5px;     margin: 0;     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     -o-box-sizing: border-box;     -ms-box-sizing: border-box;     box-sizing: border-box;         } 

JS Fiddle demo.

Note I removed the margin, since that was causing an overflow, and set the box-sizing to determine the width of the element including the width of the borders and padding.

like image 195
David Thomas Avatar answered Sep 28 '22 11:09

David Thomas


Using calc to compensate for the margin and box-sizing for the padding

input#classic {     padding: 5px;     margin: 5px;     width: -webkit-calc(100% - 10px);     width: -moz-calc(100% - 10px);     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     -o-box-sizing: border-box;     -ms-box-sizing: border-box;     box-sizing: border-box; } 

FIDDLE

like image 27
Musa Avatar answered Sep 28 '22 11:09

Musa