Skip to content
This repository

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

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

3 participants

Anne-Gaelle Colom Jasper de Groot Maurice Gottlieb
Anne-Gaelle Colom
Collaborator

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 :-)

Maurice Gottlieb

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?

Anne-Gaelle Colom
Collaborator

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.

Maurice Gottlieb

Hi Anne :-)

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

Anne-Gaelle Colom
Collaborator

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.

Anne-Gaelle Colom
Collaborator

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.

Jasper de Groot uGoMobi closed this issue from a commit June 07, 2012
Jasper de Groot Fixes #2804 - Added display block for vertical controlgroup ui-select…
… to prevent unwanted margin on FF.
6adbba4
Jasper de Groot uGoMobi closed this in 6adbba4 June 08, 2012
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.