padding on text field makes it look bad on iphone

[joelkeepup]

Hi, I am following this example:

http://www.iui-js.org/documentation/latest/iui/web-app/tutorials/getting-started/example-form1.html#_screen1

It seems that the text fields have 10px padding on top so they are lower than the label. This looks bad to me, I can remove, but wonder if there is a good reason it is there?

Also if I have some longer labels laid out on the same screen the field is right next to the label with no spacing, not sure the best way to deal with this.

thanks
Joel

[Sean Gilligan]

Looks like something has changed in Safari for iOS 7 -- is that where you are seeing it?

--
You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to iphonewebdev...@googlegroups.com.
To post to this group, send email to iphone...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev.
For more options, visit https://groups.google.com/groups/opt_out.

[Hello Gurus]

Le 22 sept. 2013 à 15:22, joelkeepup <task...@gmail.com> a écrit :

Hi, I am following this example:

http://www.iui-js.org/documentation/latest/iui/web-app/tutorials/getting-started/example-form1.html#_screen1

It seems that the text fields have 10px padding on top so they are lower than the label. This looks bad to me, I can remove, but wonder if there is a good reason it is there?

The reason of this padding is simple: the input box model gives the height of the row. Label is absolutely positioned so it doesn't affect the box model of the row. Having this means the whole row is the input, so anywhere the user taps, the input get the focus.

Its padding is here to "vertical align" input's text inside itself, aka the row. So a good idea might rather be to have the same padding value for top & bottom, rather than remove it.

Also if I have some longer labels laid out on the same screen the field is right next to the label with no spacing, not sure the best way to deal with this.

Dunno why this is not there. Probably due to some veeeery old css file being used here.

Labels should have a max-width equal to the input padding-left & a text-overflow: ellipsis.

Using media-query, you can even adapt this max-width/padding-left value to some higher value for bigger screens (aka tablets)

Feel free to look how it is done here

http://emy-library.org/demos/getting-started/forms.html#form-get

and pull request a patch for iUI :)