search

nathansmith / formalize

Teach your forms some manners!
http://formalize.me
1.31k stars 120 forks source link

Browsers !WebKit need height: 1.8em; for select[size="0"] and select[size="1"] #42

Closed isellsoap closed 12 years ago

isellsoap commented 12 years ago

height: 1.8em; is assigned to select[size="0"] and select[size="1"] only through the WebKit media query @media (-webkit-min-device-pixel-ratio: 0) { … }. At least Firefox 9 and Opera 11.6 need that declaration too, otherwise the rendered select is too small.

nathansmith commented 12 years ago

Actually, that's the point. Except for WebKit (Chrome & Safari), all browsers treat these the same...

select

select[size="0"]

select[size="1"]

So, I'm setting height:auto for select[size] and then back to the initial single <select> height for WebKit.

Meaning, this is the desired visual result:

http://cl.ly/1b1m3R2K28333u1R3K1R

Note: I added that fix, after this issue was reported, related to the Drupal forms API...

https://github.com/nathansmith/formalize/issues/40

isellsoap commented 12 years ago

I don’t get it. As it is now adding a select="0" or select="1" here renders a smaller select than the input next to it in Firefox and Opera. Is that intended?

Reading your edit now. I think we talked at cross purposes. ^_^

nathansmith commented 12 years ago

I'm not sure what you mean. This is what I see...

http://cl.ly/1A111f2D1L0N0L0C1R1f

Can you post a screenshot of what you're seeing?

isellsoap commented 12 years ago

Strangely enough I can’t reproduce the issue in Firefox anymore. Sorry for the false alarm. But it exists in Opera and in IE 9.

nathansmith commented 12 years ago

Okay, this should fix it...

https://github.com/nathansmith/formalize/commit/b7cb005b46d671f93b6d7c086eedb0527a2bac28

Thanks for the back and forth on Twitter, helping me to understand the issue.