CODEWITHSUNDEEP
jquerycssjquery-uiscrollbarmodal-dialog
All Bits Equal
All Bits Equal

Reputation: 793

jQUery UI dialog - modal creates scrollbars, wrong dimension?

I'm currently working on a site that uses ajax to load the content into a jQuery UI modal dialog.

On Win7 Firefox, Chrome, Safari and Opera it works fine.

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

I uploaded the current demo version here: - (removed to free some webspace 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.

Upvotes: 4

Views: 6691

Answers (2)

Mike Gledhill
Mike Gledhill

Reputation: 29201

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

style="overflow:hidden !important"

What did get rid of those annoying scrollbars, when a jQuery Dialog was displayed, was to add this CSS:

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

Simple, hey ?

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

Upvotes: 0

Sotiris
Sotiris

Reputation: 40096

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

Upvotes: 3

Related Questions