Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
agcolom opened this Issue · 5 comments

3 participants

Anne-Gaelle Colom Maurice Gottlieb Jasper de Groot
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.

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.