Geek Answers Handbook

JQuery dialog has a huge title

I use:
JQuery 1.6.1
JQuery UI 1.8.13
Chrome 12.0.742.100
IE 7.0.5
Ff 4

I created a jQuery UI dialog and it looked great in all 3. enter image description here

I went and did a few more pages, but did nothing for dialogs or css (which I know is new to JQuery and CSS). Then yesterday, every dialogue on all my pages started with looking like this (only in FF and Chrome. IE still looks fine) ...

enter image description here
Part of the title is suddenly huge, and I have no idea why. I am scrolling in css using firebug, but I cannot make it return.

Anyone have any good ideas?

HTML, CSS, and jQuery are pretty standard. I am using one of the pre-loaded 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); /* --------------------------------------------------------------------- */
+4
source share
2 answers

Answer: the problem with the repeater is the problem.

Just killing .repeater{float:left;} fixes the problem. However, I suppose you probably need this thing.

Fix it by wrapping all the contents inside the div with class='ui-helper-clearfix' . . Thus, when jQuery creates a modal file, it is attached to the body, and the float is cleared by our new div.

I admit that this is the strangest effect I have ever seen.

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="//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>
+5
source

For this problem with the dialog header, you can simply add the attribute below to the parent class of the dialog

 .ui-dialog { clear: both; }

For reference, jQuery UI Dialog Headerbar is too high

+2
source

More articles:


All Articles