CODEWITHSUNDEEP
htmlioscssmobilemobile-safari
Dragan Marjanovic
Dragan Marjanovic

Reputation: 1287

Inputs behaving unusually?

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

Upvotes: 1

Views: 99

Answers (1)

jaicab
jaicab

Reputation: 236

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.

Upvotes: 1

Related Questions