HTML5 - text input with padding is too wide

Question

I want an input field which will be padded from inside. I'm transferring to HTML5. I have it working in HTML 4.01 Transitional, but in HTML5 the input field started to go out of table frame. Can you help me correct it for HTML?

Part of HTML Code

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 100%; padding: 5px"  autocomplete="off" />
</td>

It looks like this:

enter image description here

But should be looking like this:

enter image description here

Here's a fiddle for you to check out and play with it: http://jsfiddle.net/kelu/DbXy5/5/

1

padding adds extra width – Royi Namir Jan 07 '14 at 14:38

score 16 · Accepted Answer · answered Jan 07 '14 at 14:40

16

Add this CSS box-sizing rule to your input field:

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

jsFiddle example

answered Jan 07 '14 at 14:40

j08691

204,283
31
260
272

I think that's it, I'm gonna check it out on all browsers, thank you! – Kelu Thatsall Jan 07 '14 at 14:41
Updated. Needed to add the -moz prefix for FF. – j08691 Jan 07 '14 at 14:45
To the anonymous downvoter, care to comment as to the problem with the answer? – j08691 Jun 15 '15 at 13:48

score 5 · Answer 2 · edited Jan 07 '14 at 14:52

5

Use box-sizing: border-box

    <input type="text" name="model_search" style="width: 100%; padding: 5px; box-sizing:border-box"  autocomplete="off" />

with vendor prefixes

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

box-sizing : border-box

Addition: ( If I may, (Royi))

-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */

edited Jan 07 '14 at 14:52

Royi Namir

144,742
138
468
792

answered Jan 07 '14 at 14:41

Dev

781
9
29

1

Hey, this is the same answer as j08691 suggested I think and still the same issue - doesn't work on firefox for me. – Kelu Thatsall Jan 07 '14 at 14:44
1

@KeluThatsall See the vendor prefixes version for FF fix – Dev Jan 07 '14 at 14:46
Thanks Royi for additional info! – Kelu Thatsall Jan 07 '14 at 14:54

score 1 · Answer 3 · answered Jan 07 '14 at 14:45

1

Try:

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing: border-box;
}

answered Jan 07 '14 at 14:45

maurelio79

292
1
9

score 0 · Answer 4 · answered Jan 07 '14 at 14:38

0

Add the padding to the class "content_listing_r" instead of the input area, this will add padding around the cell.

<td class="content_listing_r" style="width: 80%; padding: 5px;">
    <input type="text" name="model_search" style="width: 100%"  autocomplete="off" />
</td>

Alternatively, make the width smaller, and add padding as a percentage

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 96%; padding: 2%"  autocomplete="off" />
</td>

answered Jan 07 '14 at 14:38

Joshua Smickus

1,011
10
14

but will increase its own width – Royi Namir Jan 07 '14 at 14:39
Hey, thanks for your suggestion, but unfortunately it's not what I was looking for. This won't make my input field bigger (the text inside is needed to be padded) – Kelu Thatsall Jan 07 '14 at 14:40

score 0 · Answer 5 · answered Jan 07 '14 at 14:40

0

You can use the handy calc rule for css width:

<input type="text" name="model_search" style="width: -webkit-calc(100% - 10px); width: calc(100% - 10px); padding: 5px" autocomplete="off" />

...though it may have compatibility issues in less-popular browsers

answered Jan 07 '14 at 14:40

Kyle R

716
1
5
15

Hey, your solution works so I'll give it a plus, but I think `box-sizing: border-box` is much better option. Also in your solution there is a problem, that the space to the right is a little smaller than it should be (but acceptable). – Kelu Thatsall Jan 07 '14 at 15:07
I agree - `border-box` seems like the way to go. – Kyle R Jan 07 '14 at 15:29

score 0 · Answer 6 · answered Jan 07 '14 at 14:42

0

If the input field is inside the thing, then you can use a width!

When you add padding it adds some little bit width and height depending on the parameters. You are using 100% width and adding some paddings. Which is the issue!

Try this:

width: 96%;

Lessen the width a bit of the input, it will give you with the element you want! :)

http://jsfiddle.net/afzaal_ahmad_zeeshan/DbXy5/8/

answered Jan 07 '14 at 14:42

Afzaal Ahmad Zeeshan

15,669
12
55
103

2

It will look different for every different container width - so that's a no-no. Sorry – Kelu Thatsall Jan 07 '14 at 14:43

score 0 · Answer 7 · answered Jan 07 '14 at 14:45

0

The padding adds extra width, if you change

padding:5px;

to

padding:5px 0;

it will fix your problem by removing the extra width while preserving top and bottom padding.

answered Jan 07 '14 at 14:45

serakfalcon

3,501
1
22
33

You are right, but your solution will make the input text start just from the border and I want a little space between text and the border to the left. – Kelu Thatsall Jan 07 '14 at 14:47

HTML5 - text input with padding is too wide

7 Answers7