Search jQuery

jQuery Forum

Dialog Widget Overlay failed with CSS scope

in Using jQuery UI • 11 years ago

Hi,

I use for jQuery UI with CSS scope. But I've problems with the overlay for dialog widgets. To layout this I call in the dialog open method:

$('.ui-widget-overlay').appendTo(".jquery-ui"); // css scope: jquery-ui

But after the second time I dialog open the dialog widget, the overlay height inscrease every time. If I add the scope class "jquery-ui" to the body element, than everything works fine.

How can I fix this problem? I checked different css style for my scope element, but I can't fix it.

Thanks for help!

Issy

Replies(4)

Issy

Re: Dialog Widget Overlay failed with CSS scope

11 years ago

Did anyone had the same problem and found a solution with CSS scope?

rdworth

Re: Dialog Widget Overlay failed with CSS scope

11 years ago

The dialog and its overlay are unique in that they need to be at the end of the body (and direct children of the body) so you'll find, as you have, that in order to use them with a scope, that scope will have to be on the body.

Issy

Re: Dialog Widget Overlay failed with CSS scope

11 years ago

Than I didn't understand the benefits of scope: How can I handle different css themes for jQuery UI dialogs on a page?

rdworth

Re: Re: Dialog Widget Overlay failed with CSS scope

11 years ago

You've found a limitation of the css scope feature; it can be combined with dialogs but only at the body level. So you can switch in and out classes on the body, but that wouldn't allow you to have two dialogs each with a different class visible at the same time. But that's not really the design of css scope anyway. It was designed so that one widget uses one theme and a different widget uses a different theme.

Another option is to use the dialogClass option that dialog has, though that will take some custom css and will not apply to the overlay.

Top Reply

Response title

Attachments

jQuery Forum

Dialog Widget Overlay failed with CSS scope

Replies(4)

Re: Dialog Widget Overlay failed with CSS scope

Re: Dialog Widget Overlay failed with CSS scope

Re: Dialog Widget Overlay failed with CSS scope

Re: Re: Dialog Widget Overlay failed with CSS scope

Statistics

Tags

Actions