Skip to content

Use box-sizing for text inputs #3307

Closed
amiuhle opened this Issue Dec 20, 2011 · 3 comments

2 participants

@amiuhle
amiuhle commented Dec 20, 2011

Currently, text inputs are set to 97% (or 60% for @media(min-width: 450px)). Because of the CSS box model, they are wider than radio groups or checkboxes because they have padding and border.

In my current project, I fixed it by using box-sizing:

input.ui-input-text, textarea.ui-input-text {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
}

I couldn't find any disadvantages, I tested it on Chrome and webkit based mobile browsers, and according to caniuse.com, this works on all major browsers.

Is there a specific reason you are using the 97% solution, or can I submit a pull request which fixes this?

@toddparker

Using box-sizing is ideal, but is there a way to target styles where it's not supported because this is a newer feature? I'm guessing WP7, Opera Mini/Mobile, Firefox Mobile, Bada, etc. may not support this so we'd need a crisp way to target this selectively and fall back to the current approach.

@amiuhle
amiuhle commented Dec 20, 2011

Modernizr is able to test for this via

Modernizr.testPropsAll('boxSizing')

Shouldn't be a problem to extract the needed functions from Modernizr, I'll have a look at it and submit a pull request!

@toddparker

@ugomobi is working on this here #4098. Closing this a duplicate.

@toddparker toddparker closed this May 5, 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.