Vertically grouped selects displayed with a gap in FF 7.0.1. #2804

Closed
agcolom opened this Issue Oct 21, 2011 · 5 comments

3 participants

@agcolom
jQuery Foundation member

When viewing the vertically grouped selects at http://jquerymobile.com/test/docs/forms/selects/ in FF7.0.1 on MacOS, there is a small vertical gap between each of them. Note that this does not happen in Safari. Also, when viewing other vertically grouped elements (buttons, checkboxes or radio buttons) this does not happen.

Thank you :-)

@MauriceG

I can recognize this issue with FF 7.0.1 for windows.
FF adds that gaps between the selects cause they are styled with display:inline-block
If the select-divs styled only as inline, that issue disappears.
It seems, it's an browser issue, isn't it?

@agcolom
jQuery Foundation member

Hi Maurice :-) Yes, this looks like a browser issue to me too. I don't get it on Safari, the iPad2 or the iPod Touch.

@MauriceG

Hi Anne :-)

I've built a little demo at http://jsfiddle.net/MauriceG/sqd4c/
But may this just makes sense with FF 7.

@agcolom
jQuery Foundation member

Hi Maurice :-)

Your demo is brilliant and made me realise it all depends on the width of the window! go to http://jsfiddle.net/MauriceG/sqd4c/show/ (your demo) and resize your window (make it quite a lot smaller, then make it wide again). The display is fine on a narrow window! all changes when the 'vertical select' legend gets to be displayed on one line above the select or two lines in front. When it is on two lines in front of the select we get a vertical gap, which disappears when we have the legend on top of the select! Thank you. I think that's really going to help for this.

@agcolom
jQuery Foundation member

yes, changing

.ui-field-contain .ui-select {
     display: inline-block;
     width: 60%;
 }  

to

.ui-field-contain .ui-select {
     width: 60%;
 }  

seems to do the trick.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jun 8, 2012
@jaspermdegroot jaspermdegroot Fixes #2804 - Added display block for vertical controlgroup ui-select…
… to prevent unwanted margin on FF.
6adbba4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment