Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Dialog has unwanted vertical scrollbar in FF5
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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