CODEWITHSUNDEEP
ipadhtmlsafari
abalone
abalone

Reputation: 339

type="number" causing form field to shrink

Using iOS 4.2.1 on iPad/iPhone, when I view a specific web page with type="number" for a text field, the text input space is slightly shorter than when it's type="text". And when I enter 3 digits, the first one gets cutoff, while it does not get cutoff with type="text". This problem does not happen on iOS 3.x on iPad/iPhone. The input field input area is identical, and it works fine.

Has anyone noticed this problem? Is there anything I can do to fix it? Thanks.

Upvotes: 1

Views: 1448

Answers (2)

Adrian von Gegerfelt
Adrian von Gegerfelt

Reputation: 11

You need to set the unit when styling width and height.

<input syle="width: 45px; padding: 1px 0;" name="mname" type="text" value="" autofocus />

or preferred:

input[type=number] {
width: 45px;
}

Upvotes: 1

xzyfer
xzyfer

Reputation: 14135

It's probably to do with the device browser's default style sheet. If you just apply styles the same styles to the text and number input fields it should render the same.

input[type=text], input[type=number] {
    width: 100px;
    padding: 1px 0;
    ...etc...
}

Upvotes: 1

Related Questions