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

[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]

@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]

@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.