CODEWITHSUNDEEP
jquerycssjquery-ui-dialog
Veaviticus
Veaviticus

Reputation: 293

JQuery dialog has huge header

I'm using:
  JQuery 1.6.1
  JQuery UI 1.8.13
  Chrome 12.0.742.100
  IE 7.0.5
  FF 4

I made a JQuery UI dialog, and it looked fine in all 3. enter image description here

I went about and made some more pages, but did nothing to the dialogs or css (that I know of, pretty new to the JQuery and CSS stuff). Then yesterday every dialog across all my pages starting looking like this (only in FF and chrome. IE still looks fine) ...

enter image description here
The header part of it is suddenly huge, and I have no idea why. I'm been poking around in the css using firebug, but I can't get it to change back.
Anybody got any good ideas?

The HTML, CSS and JQuery are all pretty standard. I'm using one of the pre-rolled themes from the JQuery-UI site.

<div id="Div1" title="Connections">
    <a href="CM.aspx?mode=0" class="jquery-ui-button dialog-link-button">Add</a>
    <a href="CMSearch.aspx" class="jquery-ui-button dialog-link-button">Search/Edit</a>
</div>
/* --------------------------------------------------------------------- */
/* disable the x in the upper-right corner of jquery-ui dialogs */
.ui-dialog-titlebar-close 
{
    display: none;
}
/* center the user-defined buttons within jquery-ui dialogs */
.dialog-link-button
{
    float: none;
    width:250px;
    display: block;
    margin: 10px auto;
}
/* make the buttons in the jquery-ui dialog button pane on the bottom center aligned */
.ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
{    
    float: none;
    display: block;
    margin: 10px auto;
}
/* --------------------------------------------------------------------- */
var options = {
    autoOpen: false,
    modal: true,
    open: function(event, ui) {
        /* blur the buttons so they aren't auto selected */
        $(".dialog-link-button").blur();
    },
    resizable: false,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
};
$('#connectionsModal').dialog(options);
/* --------------------------------------------------------------------- */

Upvotes: 4

Views: 3538

Answers (2)

Soundar
Soundar

Reputation: 2589

For this dialog header issue you can simply add the below attribute to the dialog's parent class

.ui-dialog { clear: both; }

For reference, jQuery UI Dialog Titlebar too tall

Upvotes: 2

Levi Morrison
Levi Morrison

Reputation: 19552

Answer: your repeater float is the problem.

Simply killing .repeater{float:left;} fixes the problem. However, I figure you probably need that thing floated.

Fix it by wrapping all of your content inside a div with class='ui-helper-clearfix'. This way, when jQuery creates the modal, it gets attached to the body and the float is cleared by our new div.

I do admit, this is the strangest effect of float I've ever seen.

The modified test.htm:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>
    </title><link rel="stylesheet" type="text/css" href="./test_files/main.css" media="screen">
    <link rel="stylesheet" type="text/css" href="./test_files/jquery-ui-1.8.10.custom.css" media="screen">
    <script type="text/javascript" src="./test_files/additional-methods.min.js"></script>
    <script type="text/javascript" src="./test_files/jquery.min.js"></script>
        <script type="text/javascript" src="./test_files/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./test_files/Default.css" media="screen">
    <script type="text/javascript">

    </script>


    <script type="text/javascript">
        $(document).ready(function() { /* set up the dialogs */
        /* options for the dialogs */
        var options = {
            autoOpen: false,
            modal: true,
            open: function(event, ui) { /* blur the buttons so they aren't auto selected */
                $(".dialog-link-button").blur();
                /* justify (center) the text in the buttons. Must be done programmaticaly because each text can have a different width */
                $('.dialog-link-button .ui-button-text').each(function() {
                    justify(this);
                });
            },
            resizable: false,
            buttons: {
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        }; /* actual dialogs */
        $('#connectionsModal').dialog(options); /* set up the buttons */
        $('.jquery-ui-button').button(); /* blur the buttons so they don't get stuck in focus mode (not sure why they are stupid, just are) */
        $('.jquery-ui-button').click(function() {
            $(this).blur();
        });

    });

    /* function to justify *this* within its parent */

    function justify(e) {
        var parentWidth = $(e).parent().width();
        var thisWidth = $(e).width();
        var padLeft = (parentWidth / 2 - thisWidth / 2) + 'px';
        $(e).css('padding-left', padLeft);
    }
    </script>

    <style type="text/css">
        .jstree ul, .jstree li {
        display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
        .jstree li { display:block; min-height:18px; line-height:18px; white-space:nowrap; margin-left:18px; }
        .jstree-rtl li { margin-left:0; margin-right:18px; }
        .jstree > ul > li { margin-left:0px; }
        .jstree-rtl > ul > li { margin-right:0px; }
        .jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
        .jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; } 
        .jstree a:focus { outline: none; }
        .jstree a > ins { height:16px; width:16px; }
        .jstree a > .jstree-icon { margin-right:3px; }
        .jstree-rtl a > .jstree-icon { margin-left:3px; margin-right:0; }
        li.jstree-open > ul { display:block; }
        li.jstree-closed > ul { display:none; }
    </style>
    <style type="text/css">
        #vakata-dragged { display:block; margin:0 0 0 0; padding:4px 4px 4px 24px; position:absolute; top:-2000px; line-height:16px; z-index:10000; }
    </style>
    <style type="text/css">#vakata-dragged ins { display:block; text-decoration:none; width:16px; height:16px; margin:0 0 0 0; padding:0; position:absolute; top:4px; left:4px; } 
        #vakata-dragged .jstree-ok { background:green; }
        #vakata-dragged .jstree-invalid { background:red; }
        #jstree-marker { padding:0; margin:0; line-height:12px; font-size:1px; overflow:hidden; height:12px; width:8px; position:absolute; top:-30px; z-index:10000; background-repeat:no-repeat; display:none; background-color:silver; }
    </style>
    <style type="text/css">#vakata-contextmenu { display:none; position:absolute; margin:0; padding:0; min-width:180px; background:#ebebeb; border:1px solid silver; z-index:10000; *width:180px; } #vakata-contextmenu ul { min-width:180px; *width:180px; } 
        #vakata-contextmenu ul, #vakata-contextmenu li { margin:0; padding:0; list-style-type:none; display:block; }
        #vakata-contextmenu li { line-height:20px; min-height:20px; position:relative; padding:0px; }
        #vakata-contextmenu li a { padding:1px 6px; line-height:17px; display:block; text-decoration:none; margin:1px 1px 0 1px; }
        #vakata-contextmenu li ins { float:left; width:16px; height:16px; text-decoration:none; margin-right:2px; }
        #vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background:gray; color:white; } #vakata-contextmenu li ul { display:none; position:absolute; top:-2px; left:100%; background:#ebebeb; border:1px solid gray; }
        #vakata-contextmenu .right { right:100%; left:auto; }
        #vakata-contextmenu .bottom { bottom:-1px; top:auto; }
        #vakata-contextmenu li.vakata-separator { min-height:0; height:1px; line-height:1px; font-size:1px; overflow:hidden; margin:0 2px; background:silver; /* border-top:1px solid #fefefe; */ padding:0; }
    </style>
    <style type="text/css">.jstree .ui-icon { overflow:visible; }
        .jstree a { padding:0 2px; }
    </style></head>


    <body>
        <div id="head"></div>

        <div id='content' class='ui-helper-clearfix'>
            <form name="aspnetForm" method="post" action="./test_files/test.htm" id="aspnetForm">
                <div>
                    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTczNTE4NjAPZBYCZg9kFgICAw9kFgICAQ9kFgYCBQ8WAh4LXyFJdGVtQ291bnQCBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI2Mg1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjENVEVTVF9GQUNJTElUWQMgOiAEdGV3dGQCBA9kFgJmDxUEAjYwDVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI1OQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIGDxYCHwACBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI1Nw1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjINVEVTVF9GQUNJTElUWQMgOiAEdGVzdGQCBA9kFgJmDxUEAjU4DVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI2MQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIHDxYCHwBmZGQolRp/M4dzIRG65MxM4hACjSHkZw==">
                </div>

                <div style="margin:45px 50px 10px 15px;">


                    <input type="button" id="connectionButton" value="Connections" class="bigButton jquery-ui-button ui-button ui-widget ui-state-default ui-corner-all" onclick="$(&#39;#connectionsModal&#39;).dialog(&#39;open&#39;); return false;" role="button">


                    <br><br><br>
                    <div id="lastInsertedTable" class="repeater ui-helper-clearfix">
                        <span>Recently Added</span>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <span style="float:left;width:100%;height:1px;"></span>
                </div>
            </form>
        </div>
        <div style="outline-width: 0px; outline-style: initial; outline-color: initial; width: 300px; top: -13px; left: 489px; height: auto; position: relative; z-index: 1002; display: none; " class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-connectionsModal"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-connectionsModal">Connections</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
            <div id="connectionsModal" class="m_dialog ui-dialog-content ui-widget-content" style="min-height: 80px; width: auto; height: auto; ">
                <a href="#" class="jquery-ui-button dialog-link-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text" style="padding-left: 109.5px; ">Add</span></a>
                <a href="#" class="jquery-ui-button dialog-link-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text" style="padding-left: 81px; ">Search/Edit</span></a>
            </div>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Cancel</span></button>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 5

Related Questions