Vertically grouped selects displayed with a gap in FF 7.0.1.

[agcolom]

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]

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]

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]

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.