Buttons are not horizontally centralised. This is especially obvious when they are placed after a text input, and when the width of the window is narrow, ie iPhone size and below.
I looked at your fiddle on Chrome and everything looks centered to me. Do you mean that buttons are a bit smaller than input fields, because they have a margin left and right?
I think I know what you mean now, but its not the buttons but the text inputs that are not centered. Right?
I don't see the issue as described. There are some slight variations in the width of elements due to some complexity of having padding on flexible width elements but this seems to be about somethign else. @elfgoh can you provide a clearer description?
My apologies for the lack of clarity. I had made another post with a screenshot but apparently that did not get posted up.
Pls refer to http://www.flickr.com/photos/elfgoh/6946661418/in/photostream
Points A, B, C, D respectively depict
I believe that it is aesthetically more pleasing if (B-A) == (C-D). But right now, (B-A) < (C-D).
Hope that is clearer.
In the case above, adding width: 97%; to .ui-btn fixes the problem. @toddparker would that have bad effects elsewhere if I make the change?
Just checked and adding width: 97%; to .ui-btn would fix the problem above but would kill inline buttons... need to think a bit more about it :-)
@agcolom wow I did not know I could do the attention thing like on twitter and facebook in github too!
Besides the inline button issue, there still would be difference.
The width of the input fields is 97% plus .4em padding left and right. That means you would have to remove the 5px left and right margin on the button and replace it by .4em padding. Or box-sizing border-box on the text inputs if that works on all browser/platforms (leaving out IE7).
Since giving the button and text inputs the same width is not easy to accomplish I was thinking maybe we could add margin 0 auto to the text inputs. IMHO that makes it look better on small as well as large screens.
@uGoMobi - If you want to take a crack at making these more standardized, please feel free. We do need to support IE (esp. 9/WP7.5) in some form so we need to figure out how to handle that gracefully.
@toddparker Hi Todd, I looked into possible css solutions to make the text inputs 100% width, but don't see any other than using box-sizing. Seems to work on all browsers/platforms except IE7. I am not sure about WP7 / 7.5.
Maybe you can test this some time on WP: http://jsfiddle.net/M2D8k/1/show/
My suggestion to use margin 0 auto if we can't make buttons and text inputs same width turned out to look not so great after all. It does when you only use text inputs but as soon as you combine with other form elements you get some kind of ugly Xmas tree.
What about doing the same as what is done for search inputs, having the framework wrapping it in a div?
@agcolom Anne, do you have an idea how we can make this look better?
Hi @uGoMobi - If you can figure out a way to use box-size for all the good browsers and have a decent fallback for IE7, I'd be very open to giving this a go. Maybe you can prepare a test page?
Hi @toddparker !
I've set up a test page: [edit: removed this link; link to new test page will be added to PR]
I am still thinking about a good fallback for IE7. Question: can you take a look at the test page on a Windows Phone device? I can't test WP myself and it would be good to know if IE7 is the only problem I have to deal with.
@Wilto Since you are working on a fix for #3301 (field 60% width) I guess you have been looking into box-sizing border-box as well. Are there other issues besides IE7 that I haven't thought of?
@toddparker @Wilto Could one of you change the title of this issue into something like forms alignment? Thanks!
@uGoMobi - Ok, all set. Good idea.
Here is my take on it. It seems to work on the project I am working on on different phones and screens, but may be flawed otherwise. Please note that it has extra entries for fixing other CSS issues in jQM 1.0.1 / 1.1.0, too.
/* leftmost button in footer */
/* footer size issue */
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c
display: block !important;
width: 100% !important;
margin: 0 0 0.5em !important;
margin: 0.5em 0 0.5em 0;
padding: 0 .8em 0 0;
width: 3em !important;
height: 2.6em !important;
width: 3em !important;
height: 2.6em !important;
@uGoMobi - We tested box-sizing border-box on WP 7 and 7.5 using this link: jsbin.com/emaziy/
WP7 Result -----
The border-box form elements display ~10px wider than the current examples so the right stroke is exactly at the right edge of the screen. Nothing wraps oddly or looks off so this seems like an acceptable experience.
WP7.7 Result ------
The border-box form elements display ~5px narrower than the current examples, but this also seems to be your intention because this is how that example renders on iOS5 and Android 4.0. With this narrower input, the space on the left and right is now 100% symmetrical so that change looks great to me.
In general, I think the slightly wider WP7 inputs aren't worth worrying about because most/all WP phones will be upgraded to 7.5 - Microsoft is being aggressive about upgrading. I think this looks great.
For reference, support for box-sizing:
Opera 8.5+: box-sizing
Firefox 1-3: -moz-box-sizing (unprefixed in modern versions)
Safari 3: -webkit-box-sizing (unprefixed in modern versions)
@toddparker - Thanks a lot for testing this, Todd!
Closing as fixed by PR #4498