Databases
StackOverflow2013
Postsdbo
POjQuery UI Dialog has unwanted vertical scrollbar in FF5
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Dialog has unwanted vertical scrollbar in FF5
    text
    copied!<p>I'm trying to launch a jQuery UI dialog that contains an Iframe to a very simple html page. The page should not need scrollbars. In IE9 I don't get scrollbars, but in FF5 I get a vertical scrollbar. Here's the page that launches the dialog:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; iframe {width:100%; height:100%; border:0;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="" onclick="return showDialog()"&gt;Show the Dialog&lt;/a&gt; &lt;div id="dlg"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; $("#dlg").dialog({ autoOpen: false, modal: true, width:400, height:300, resizable:false, title: "YO"}); function showDialog() { $("#dlg").html('&lt;iframe src="frame.htm" /&gt;').dialog("open"); return false; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And here's the simple frame.htm page that the IFrame displays:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * {margin:0; padding:0;} body { background:#EFF;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;p&gt;I'm a paragraph&lt;/p&gt; &lt;div style="height:2px; background:#000;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>? </p> <p>So far the best I've been able to do is disable scrolling altogether by altering the jQuery UI CSS like this:</p> <pre><code>.ui-dialog .ui-dialog-content { overflow: hidden; } </code></pre> <p>But I'd like to be able to use overflow:auto for if the content actually warrants a scrollbar. Thanks very much for any help.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload