Skip to content

Loading…

width of textinput depends on its type #5131

Closed
CodeRect opened this Issue · 5 comments

5 participants

@CodeRect

description:

the width of textinput depends on its type. some are just smaller than others.

screenshot:

http://picpaste.com/un7j7UxP.png
(mirror: http://www.imagebanana.com/view/igef75vw/un7j7UxP.png)

jsfiddle:

http://jsfiddle.net/CrLDv/
(i just wanted to provide a minimal example)

device:

nexus s
(running android 4.1.1)

@jschulte

jQuery reports that both of the input fields are the same width even though visually they differ.

@toddparker

I bet this is due to some odd vestigial spacing for the spinner arrows that is used on desktop Chrome but they suppress on mobile. If bet if we added this, they would be the same width:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
@toddparker

This has that style change in for testing...
http://jsfiddle.net/CrLDv/2/

@jschulte jschulte pushed a commit that referenced this issue
Jonah Schulte inputs: remove webkit-inner-spin-button and webkit-appearance:none as…
… they caused an unwanted change in Chrome. Fixes #5131
8a07720
@gseguin gseguin pushed a commit that closed this issue
Jonah Schulte inputs: add margin 0 for webkit-inner-spin-button/webkit-outer-spin-b…
…utton to resolve android 4.1 width issue for type=number fields. Fixes #5131
62457f9
@gseguin gseguin closed this in 62457f9
@toddparker

Hold on, I just posted that page to prove that this was a vestigal style problem in Webkit. I don't think we should hide the spinners by adding the -webkit-appearance: none; property because this will remove the functionality on desktop browsers and, in theory, future mobile browsers that eventually support a spinner type feature on spinner inputs.

@jaspermdegroot
jQuery Foundation member

Just margin 0 should do the trick.

Update: @jschulte already removed -webkit-appearance: none; so this is resolved.

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.