CODEWITHSUNDEEP
csswidthtextinput
Hubro
Hubro

Reputation: 59333

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

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!

Upvotes: 26

Views: 25671

Answers (4)

JGallardo
JGallardo

Reputation: 11373

For those who are here because your input exceeds the container

Just add box-sizing: border-box;

An update for May 2024.

Because user Musa, 12 years ago, had to add a workaround to compensate for the padding. And another user mentioned low browser compatibility.

Just adding the following stylings to your <input> class will prevent the input from overflowing regardless of padding.

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

Here was the problem i had before, notice the input exceeding the width of the parent.

enter image description here

Then i changed the box sizing

enter image description here

Upvotes: 3

Prashobh
Prashobh

Reputation: 9542

Try with display:table-cell property

  display:table;
  display:table-cell;

may it help you

please check this link

Style input element to fill remaining width of its container

Upvotes: -1

Musa
Musa

Reputation: 97672

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

Upvotes: 2

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 41

Related Questions