custom select widget have a top-margin when displaying in a dialog #4699

Closed
ErwanMAS opened this Issue Jul 13, 2012 · 2 comments

3 participants

@ErwanMAS

When we display a custom select , in a page , the design of the widget is correct .

But when i display the same custom select , in a dialog , the design of widget is not the same .

A example at this url http://jsfiddle.net/RPYN7/

@agcolom
jQuery Foundation member

@ErwanMAS Thanks a lot for reporting.
@uGoMobi @toddparker this is due to the margin-top: 15% (see below)

ui-dialog .ui-header {
border: 0 none;
margin-top: 15%;
overflow: hidden;
}

I have updated the jsfiddle provided and here are 2 versions:

1.1.1 http://jsfiddle.net/agcolom/RPYN7/3/
latest http://jsfiddle.net/agcolom/RPYN7/2/

there is also a significant difference between the 2 in term of width of the dialog. It also illustrates the newly reported issue with the placeholder. #4696

@jaspermdegroot
jQuery Foundation member

@ErwanMAS - Thanks for reporting. Fix is on its way.

While using 1.1.1. you can add this to your custom/theme CSS:

.ui-selectmenu .ui-header { margin-top: 0 !important; }

@agcolom - Thanks for updating the fiddles.

The difference in width is a deliberated change that was made while the custom select menus were ported over to the popup. They had a min-width of 80% and a max-width of 350px. As from 1.2 (and with latest) there will be only a min-width of 160px.

The issue with the placeholders seems to be fixed on latest.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jul 14, 2012
@jaspermdegroot jaspermdegroot Selectmenu: Set margin 0 for the selectmenu header. Fixes #4699 - cus…
…tom select widget have a top-margin when displaying in a dialog.
e245154
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Jul 14, 2012
@jaspermdegroot jaspermdegroot Dialog: The rules for dialog sections should only apply to immediate …
…children. Additional fix for #4699: when using the Download Builder the CSS could be reordered which eliminates the override.
e60dfa8
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Jul 14, 2012
@jaspermdegroot jaspermdegroot Selectmenu: Set margin 0 for the selectmenu header. Fixes #4699 - cus…
…tom select widget have a top-margin when displaying in a dialog.
e4e504b
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Jul 14, 2012
@jaspermdegroot jaspermdegroot Dialog: The rules for dialog sections should only apply to immediate …
…children. Additional fix for #4699: when using the Download Builder the CSS could be reordered which eliminates the override.
d906940
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment