1

I am having alot of trouble putting my problem into words, and it would be much appreciated if someone could perhaps 'sum it up better'. Anyways, I'm styling a form to gather information, as it is targeted at a mobile device, I want the fields to stretch to 100%, filling the screen. Using a text area, this works fine on all mobile OS's, however, by using a standard , the layout on the iPhone is broken, note this does not occur on Android. I believed it was a bug with Safari, but it works in desktop Safari, so maybe something to do with iOS rendering?

Standard expected behaviour, and in browsers Standard expected behaviour.

iOS Behaviour iOS behaviour

Note: A live preview of the site can be found at http://www.draganmarjanovic.com However, this is only present on a resolution of <720px.

The same CSS code is used for both the input and the text area. - Cheers

6
  • box-sizing:border-box; Dec 9, 2013 at 16:28
  • @MLeFevre That works, but why are the text area and input responding differently? Dec 9, 2013 at 16:31
  • I believe it is due to how a browser renders the form tags, each browser renders them slightly different. Dec 9, 2013 at 16:35
  • No problem, here is a helpful answer to fill you in a little more about this. stackoverflow.com/questions/5361606/… Dec 9, 2013 at 16:40
  • 1
    Your elements are at width:100%, but different browsers are also allocating them additional padding by default, if you change each element to have padding:0px; it'll probably display fine as well. The box model doesn't take padding into consideration when calculating the whole element width, whereas border-box does. So whatever browser you have problems with, under the box model it'll make the element width:100%; and then add the padding the browser gives that element by default. Here's a better article rather than my crappy explanation - css-tricks.com/box-sizing Dec 9, 2013 at 16:42

1 Answer 1

1

The padding on the textarea and the input are different by default (user-agent stylesheet) and you haven't given a reset value for them. Try setting padding:0; on both of them, it should work.

Why did it work when you tried box-sizing:border-box; as @MLeFevre told you, you ask? Because what this property does is make the padding count as width and not as an addition of it (which is the normal browser behaviour we've had till CSS3). It does the same with border width too. So, it didn't matter the default padding wasn't zero because the width would be 100% no matter what padding you set.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.