jQuery UI Dialog has unwanted vertical scrollbar in FF5_问答_开发者

jQuery UI Dialog has unwanted vertical scrollbar in FF5

开发者 https://www.devze.com 2023-03-24 02:23 出处：网络

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.

相关专题：css jquery-ui

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:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></scr开发者_Python百科ipt>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
    <style type="text/css">
        iframe {width:100%; height:100%; border:0;}
    </style>
</head>
<body>
    <a href="" onclick="return showDialog()">Show the Dialog</a>
    <div id="dlg"></div>

    <script type="text/javascript">
        $("#dlg").dialog({ autoOpen: false, modal: true, width:400, height:300, resizable:false, title: "YO"});

        function showDialog()
        {
            $("#dlg").html('<iframe src="frame.htm" />').dialog("open");
            return false;
        }
    </script>
</body>
</html>

And here's the simple frame.htm page that the IFrame displays:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *    {margin:0; padding:0;}
        body { background:#EFF;}
    </style>
</head>
<body>
<div>
    <p>I'm a paragraph</p>
    <div style="height:2px; background:#000;"></div>
</div>
</body>
</html>

So far the best I've been able to do is disable scrolling altogether by altering the jQuery UI CSS like this:

.ui-dialog .ui-dialog-content { overflow: hidden; }

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.

The scrollbar disappears, once you set the iframe to height: 95%. As to why the dialog behaves like that, i would have to investigate further, but it does work for the moment

It seems to be caused by the dialog, not the iframe itself