All geek questions in one place

JQuery UI dialog - modal creates scrollbars, wrong dimension?

I am currently working on a site that uses ajax to load content into a jQuery modal dialog.

In Win7 Firefox, Chrome, Safari and Opera everything works fine.

In Internet Explorer 7-9pp and on mac firefox, chrome, safari and opera, the size of the modal background layer seems wrong and creates vertical and horizontal scrolling until you resize the browser.

I downloaded the current demo here: - (removed to free some web space on my server, see comments / answers for details on the problem / solution)

the basic layout is something like this

<body> <div id="wrapper">header, navigation, footer and stuff</div> <div class="ui-dialog"></div> <div class="ui-widget-overlay"></div> </body>

with the following styles

 html { height: 100%; overflow-y: scroll; } body { display: block; height: 100%; margin: 0; padding: 0; } .ui-widget-overlay { position: absolute; bottom: 0; left: 0; }

Thanks in advance for everything.

+4
source share
2 answers

for your HTML tag, in the css style.css file there is overflow-y:scroll . Delete it and add overflow:hidden;

+3
source

Adding overflow:hidden did nothing for me, even if I opened the Chrome developer tools and manually added it or tried to make it important:

 style="overflow:hidden !important"

To get rid of these annoying scrollbars when the jQuery dialog was shown, I needed to add this CSS:

 .ui-widget-overlay { width:100% !important; height:100% !important; }

Simple hey?

It's just weird that jQueryUI doesn't include this by default ...

0
source

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

More articles:


All Articles