Standardize form and button widths

[elfgoh]

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.

http://jsfiddle.net/4PX9x/

[jaspermdegroot]

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?

Edit:
I think I know what you mean now, but its not the buttons but the text inputs that are not centered. Right?

[toddparker]

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?

[elfgoh]

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

• A: x coordinate of the left side of the text input
• B: x coordinate of the left side of the button
• C: x coordinate of the right side of the text input
• D: x coordinate of the right side of the button

I believe that it is aesthetically more pleasing if (B-A) == (C-D). But right now, (B-A) < (C-D).

Hope that is clearer.

Cheers,

Luther

[agcolom]

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?

[agcolom]

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 :-)

[elfgoh]

@agcolom wow I did not know I could do the attention thing like on twitter and facebook in github too!

Moving on....

[jaspermdegroot]

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.

[toddparker]

@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.

[jaspermdegroot]

@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?

Jasper

[toddparker]

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?

[jaspermdegroot]

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?

Thanks!

Jasper

[toddparker]

This is looking really good but I'll need to give this a closer look.
I'll try to test this on WP7 this week for you.

On May 2, 2012, at 3:02 PM, Jasper de Groot wrote:

Hi @toddparker !

I've set up an test page: http://ugomobi.github.com/forms/

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?

Thanks!

Jasper

---

Reply to this email directly or view it on GitHub:
#4098 (comment)