All geek questions in one place

JQuery UI Dialog Overlay Height & Width does not fit window size

Problem

JQuery UI overylay causes browser scrollbars to appear. I am using the latest jQuery and jQuery UI without any theme.

the code

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="includes/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="includes/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> </head> <body> <a href="#">open modal</a> <div id="dialog" style="display:none;">test</div> <script type="text/javascript"> $('a').click(function () { $('#dialog').dialog({modal: true}); }); </script> </body> </html>

It is very simple. I do not know why it creates scrollbars.

Any ideas on this? I'll be very happy.

Thanks in advance.

PS I'm trying to add jQuery UI to a topic that I need to work with. I tried to erase CSS rules as little as possible.

Now I'm not sure that this problem is not related to FireFox (7.0.1). When I use the modal theme dialog box (the UI has a theme), I work and return to test.html (without a user interface theme), the problem arises again. If I use in both windows (with the theme), everything is fine with the theme.

Has anyone encountered a similar problem?

+6
source share
3 answers

I solved the problem using blockUI .

If someone is experiencing a similar problem, this is another possible solution:

 //Get The Height Of Window var height = $(window).height(); //Change Overlay Height $(".jquery-ui-dialog-overlay-element").css('height',height);

If you encounter problems with width, you can do the same with the addition of the variable var width = $(window).width(); to your page and changing the width of the overlay using .css ()

+4
source

I ran into this problem. By adding the following CSS, he fixed it.

 .ui-widget-overlay { position: fixed; }
+28
source

Has anyone encountered a similar problem?

I have and I have added the following to my CSS. It puts the scroll bar on the page all the time in an inactive state when it is not required. This prevents the page from being displayed “jumping” when something is added to the page that activates the scroll bar.

 html {overflow-y: scroll;}

Not sure if it works with your theme, but worth a try.

+2
source

Source: https://habr.com/ru/post/898420/

More articles:


All Articles