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

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

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

Comments

Projects
None yet
3 participants
@ErwanMAS
Contributor

ErwanMAS commented Jul 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Jul 14, 2012

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

Member

agcolom commented Jul 14, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 14, 2012

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.

Member

jaspermdegroot commented Jul 14, 2012

@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 added a commit that referenced this issue Jul 14, 2012

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.

jaspermdegroot added a commit that referenced this issue Jul 14, 2012

Selectmenu: Set margin 0 for the selectmenu header. Fixes #4699 - cus…
…tom select widget have a top-margin when displaying in a dialog.

jaspermdegroot added a commit that referenced this issue Jul 14, 2012

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment