HTML input element wider than Containing Div

BrandonS_42858 0
Viewed 61459

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.

css html
8 Answers

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

user_51038580

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.

user_108101690
Related