New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
3 participants
@agcolom
Member

agcolom commented Oct 21, 2011

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Oct 22, 2011

Contributor

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?

Contributor

MauriceG commented Oct 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Oct 22, 2011

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.

Member

agcolom commented Oct 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Oct 22, 2011

Contributor

Hi Anne :-)

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

Contributor

MauriceG commented Oct 22, 2011

Hi Anne :-)

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

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Oct 22, 2011

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.

Member

agcolom commented Oct 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Oct 22, 2011

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.

Member

agcolom commented Oct 22, 2011

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