Skip to content
This repository

Standardize form and button widths #4098

Closed
elfgoh opened this Issue April 18, 2012 · 18 comments

6 participants

elfgoh Mat Marquis Jasper de Groot Todd Parker Anne-Gaelle Colom
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/

Jasper de Groot
Owner

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?

Todd Parker

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

Anne-Gaelle Colom
Collaborator

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?

Anne-Gaelle Colom
Collaborator

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

Jasper de Groot
Owner

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.

Todd Parker

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

Jasper de Groot
Owner

@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

Todd Parker

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?

Jasper de Groot
Owner
uGoMobi commented May 02, 2012

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

Todd Parker
Jasper de Groot
Owner
uGoMobi commented May 08, 2012

@toddparker @Wilto Could one of you change the title of this issue into something like forms alignment? Thanks!

Todd Parker

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

body,
html
{
    height: auto;
    background-color: black;
}

.ui-bar-c
{
    border: none;
}

/* leftmost button in footer */
a#btn-about
{
    border-left: none;
}

/* footer size issue */
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c
{
    width: 33.334%;
}

input[type=text],
input[type=email],
input[type=password]
{
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.5em !important;
}

.ui-btn
{
    margin: 0.5em 0 0.5em 0;
}

.text-input-container
{
    padding: 0 .8em 0 0;
}

div.ui-slider span.ui-btn-inner
{
    border-top: none;
}

label.ui-checkbox-off,
label.ui-checkbox-on
{
    width: 3em !important;
    height: 2.6em !important;
}

div.ui-checkbox
{
    width: 3em !important;
    height: 2.6em !important;
}
Todd Parker

@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)
IE8+: box-sizing
http://css-tricks.com/box-sizing/

Jasper de Groot
Owner

@toddparker - Thanks a lot for testing this, Todd!

Jasper de Groot
Owner

Closing as fixed by PR #4498

Jasper de Groot uGoMobi closed this June 08, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.