HTML input element wider than Containing Div

Question

I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level, I am having an issue where the textbox extends past the right of the containing div.

Basic example code:

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.

Answer 1

You can use box-sizing:border-box to take care of this. Just put the following in your css file:

input{box-sizing:border-box} 

It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.

Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw

The points he makes about padding also apply for the border.

There's even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)

Answer 2

This did the job for me :

input {
  padding: 0.2em; 
  box-sizing: border-box;
  width: 100% 
} 

Answer 3

Try to give input width : 100%; box-sizing: border-box;

Answer 4

unfortunately this will depend on the browser you are working with but setting the width of the object (the textbox) does not take into account the width of the border on the object. most browsers only take into consideration any padding from the outer object and margins from the contained object but a few (i'm looking at you IE) do not add in the border when calculating percentages;

your best bet is to change the border on the textbox or to throw in another div between teh textbox and the container with a padding of say 2px with a margin-top: -2px and a margin-left:-2px (i'm guessing at the border width)

Answer 5

I'm assuming that you want the contained element (<input>) to be smaller than, or contained entirely within, the <div>?

You can either:

input {width: 50%; /* or whatever */ }

An html-element's width is calculated (I think) as the defined width + borders + margin + padding

If you've already defined the input as having 100% width of the parent, and then the other attributes are added it will definitely overflow the parent div.

You can set the margin/padding/borders to 0, but that would likely not look good. So it's easier, though not necessarily perfect, just to use a suitably-smaller width.

You could, of course, use

#parent_div {overflow: hidden; /* or 'auto' or whatever */}

to hide the portion of the input element that would normally overflow the container div.

Answer 6

Please apply the following css to your input elements.

{
    box-sizing: border-box;
    width: 100%;
}

if you use bootstrap or other css library, it will be not problem.

Answer 7

I know this post is fairly old, but it's a common problem and no one posted any good answers...

The following HTML code looks fine. But when I add the doctype, the problem appear

div.field_container
{
    height: 25px;
    width: 150px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <input type="text" name="" value="" />
</div>

To fix the width / height problem, you can add padding to your field_container, but that will make the container bigger.

div.field_container
{
    height: 25px;
    width: 150px;
    padding-bottom: 6px;
    padding-right: 4px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <input type="text" name="" value="" />
</div>

If you can't change the container width, you can also use the following trick, but that will still increase the height

div.field_container
{
    height: 25px;
    width: 150px;
    padding-bottom: 6px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>

Answer 8

Instead of applying the style directly on the input element, maybe abstract the CSS into a file and use classes:

div.field_container
{
  height: 25px;
  width: 150px;
}

div.field_container input
{
  height: 100%;
  width: 100%;
} 

<div class="field_container">
  <input type="text" name="" value="" />
</div>

I am running out the door before I could test if this helps at all, but at the very least, you could play with max-height/width settings on the DIV css to make it not break if my solution doesn't work. And having the CSS abstracted like this makes problems easier to solve using a plugin like Firebug in Firefox.

Question though, is there a need to enclose the input tag in it's own DIV? I wouldn't be surprised if there is just a better layout you could build that would avoid the need to do this...