3

i have a Tablecell with an Inputfield in it. The Inputfield should fill up the Tablecell but not reach into its padding. What i have looks like this (with firebug):

Form Element reaching into padding

I want the inputfield to be kept inside the blue area and not raching into the purple one.

And: Of course i read all the questions here on this topic first. I read all of it and i could not find any answer which actually solved that.

It should work in all modern browsers (ie7 as well);

I made a minimal live Example with jsfiddle where i tried all the solutions in the other questions but i just could not get this to work. a) Is there a working solution for this? and b) Is there even a nice and non-workaroundish solution for this?

Why is this a problem in all browsers? I think this is a wrong specification in CSS. Because if i say "100%" of course i want the element to fit "100%" of the CONTENT Area. What is the use case for letting it flow into paddings and margins?

Chris
  • 7,675
  • 8
  • 51
  • 101
  • 2
    I've answered this question quite a few times. Here's one of the better versions: http://stackoverflow.com/questions/5219030/content-of-div-is-longer-then-div-itself-when-width-is-set-to-100/5219090#5219090 – thirtydot Mar 30 '11 at 15:34
  • Yes... again... i read all the questions but your solutions are just not working or at least not working in my case. – Chris Mar 30 '11 at 15:48
  • 1
    why are you getting so frustrated at those who are trying to help you? – biggles Mar 30 '11 at 17:10
  • 1
    I'm really sorry for this. I was late at work, spending the whole day on a very very frustrating css problem, not getting further with what i actually had to do. (The kind of problems noone should have to bother about because this should just work). So i especially apologize to thirtydot. – Chris Mar 31 '11 at 08:09
  • There is no "case for it" CSS like other "standards" are designed by clueless hippies. Just because something is "standard" doesn't imply it is "good" or "well designed". If you want to thrive in IT you better drop your idealism ... no place for it here! – Jack May 17 '12 at 15:08

3 Answers3

6

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>
Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Okay thanks, i got this working but i have to make the padding of the input container 2 more pixels on right than on the left side, because the 1px border on both sides will cause the inputfield to be rendered 2 pixels into the padding of my td element. so what i did is: padding: 3px 5px 3px 3px. This will not happen if you do not have a td element or some other block element surrounding it like in your example. Thanks for the help then. – Chris Mar 31 '11 at 12:07
  • You can put whatever padding *or border* you like, you shouldn't have to make changes like you're describing. For example: http://jsfiddle.net/AKUsB/1/ But if you've sorted it out, then leave it alone, it's all good :P – thirtydot Mar 31 '11 at 12:25
3

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

input { width: 100%; padding: 0; }

Or

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

RussellUresti
  • 6,211
  • 4
  • 28
  • 26
  • This doesn't *quite* work. You're forgetting about the `border`, which is a problem in the exact same way that the `padding` is. It just so happens that the `border` is usually only `1px` on each side, so it's harder to notice. For example, see: http://jsfiddle.net/thirtydot/dnCpF/ – thirtydot Mar 30 '11 at 15:50
  • 2
    True, you would have a problem with border. In most newer browsers, you can solve this by using -webkit-box-sizing: border-box / -moz-box-sizing: border-box / -ms-box-sizing: border-box / box-sizing: border-box. This will allow the box model to compute width based on content area, padding, and border. So the "width: 100%" would include all of those values, not exclude them. – RussellUresti Mar 30 '11 at 15:53
  • @RussellUresti: Yup, that's the way. See my linked answer on the comment to the question for an example. – thirtydot Mar 30 '11 at 15:55
  • O common... thirtydot... I READ ALL YOUR ANSWERS OKAY??? And i actually tried them. But the ie7 compatible one is NOT WORKING. And i definetly NEED ie7 compilance. – Chris Mar 30 '11 at 15:59
  • @Chris: What does "not working" mean? I can't see how [the IE7 compatible method](http://stackoverflow.com/questions/5219175/width-100-padding/5219611#5219611) can go wrong. Do you want me to make an example with your jsFiddle? – thirtydot Mar 30 '11 at 16:22
  • @thirtydot: that would be great, because i tried that and i could not get this to work. (Means, that this has no effect). The effect i got was, that the inputfield was now wrapped inside another div element but now that div element and the inputfield together where flowting into the padding. – Chris Mar 31 '11 at 07:27
  • So i made my fiddle to match your solution here: http://jsfiddle.net/2MZrT/10/ and unfortunately the input is still going into the padding. – Chris Mar 31 '11 at 09:17
  • @thirtydot: i almost got your solution to work: http://jsfiddle.net/2MZrT/13/ now this is much better than before but there will be always running 1px into the padding (i think because of the border). Can we fix this with your solution to? – Chris Mar 31 '11 at 09:28
  • @Chris: Funny, I didn't even see that (edit: second to) last comment of yours before writing my answer (because you didn't use @thirtydot and you wrote it on somebody else's answer, but no problem) – thirtydot Mar 31 '11 at 09:29
1

I think you should try to use

box-sizing: border-box
Hlib Liapota
  • 168
  • 1
  • 6