width of textinput depends on its type #5131

Closed
sniklaus opened this Issue Oct 4, 2012 · 5 comments

Comments

Projects
None yet
5 participants
@sniklaus

sniklaus commented Oct 4, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jschulte

jschulte Oct 16, 2012

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

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 16, 2012

Contributor

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;
}
Contributor

toddparker commented Oct 16, 2012

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 comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 16, 2012

Contributor

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

Contributor

toddparker commented Oct 16, 2012

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

@gseguin gseguin closed this in 62457f9 Oct 16, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 17, 2012

Contributor

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.

Contributor

toddparker commented Oct 17, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Oct 17, 2012

Member

Just margin 0 should do the trick.

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

Member

jaspermdegroot commented Oct 17, 2012

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