Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>Answer: your repeater float is the problem.</h2> <p>Simply killing <code>.repeater{float:left;}</code> fixes the problem. However, I figure you probably need that thing floated.</p> <p><strong>Fix it by wrapping all of your content inside a <code>div</code> with <code>class='ui-helper-clearfix'</code>.</strong> This way, when jQuery creates the modal, it gets attached to the body and the float is cleared by our new div.</p> <p>I do admit, this is the strangest effect of float I've <em>ever</em> seen.</p> <p><em>The modified <code>test.htm</code>:</em></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;title&gt; &lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href="./test_files/main.css" media="screen"&gt; &lt;link rel="stylesheet" type="text/css" href="./test_files/jquery-ui-1.8.10.custom.css" media="screen"&gt; &lt;script type="text/javascript" src="./test_files/additional-methods.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="./test_files/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="./test_files/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="./test_files/Default.css" media="screen"&gt; &lt;script type="text/javascript"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; $(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); } &lt;/script&gt; &lt;style type="text/css"&gt; .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 &gt; ul &gt; li { margin-left:0px; } .jstree-rtl &gt; ul &gt; 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 &gt; ins { height:16px; width:16px; } .jstree a &gt; .jstree-icon { margin-right:3px; } .jstree-rtl a &gt; .jstree-icon { margin-left:3px; margin-right:0; } li.jstree-open &gt; ul { display:block; } li.jstree-closed &gt; ul { display:none; } &lt;/style&gt; &lt;style type="text/css"&gt; #vakata-dragged { display:block; margin:0 0 0 0; padding:4px 4px 4px 24px; position:absolute; top:-2000px; line-height:16px; z-index:10000; } &lt;/style&gt; &lt;style type="text/css"&gt;#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; } &lt;/style&gt; &lt;style type="text/css"&gt;#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 &gt; 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; } &lt;/style&gt; &lt;style type="text/css"&gt;.jstree .ui-icon { overflow:visible; } .jstree a { padding:0 2px; } &lt;/style&gt;&lt;/head&gt; &lt;body&gt; &lt;div id="head"&gt;&lt;/div&gt; &lt;div id='content' class='ui-helper-clearfix'&gt; &lt;form name="aspnetForm" method="post" action="./test_files/test.htm" id="aspnetForm"&gt; &lt;div&gt; &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTczNTE4NjAPZBYCZg9kFgICAw9kFgICAQ9kFgYCBQ8WAh4LXyFJdGVtQ291bnQCBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI2Mg1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjENVEVTVF9GQUNJTElUWQMgOiAEdGV3dGQCBA9kFgJmDxUEAjYwDVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI1OQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIGDxYCHwACBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI1Nw1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjINVEVTVF9GQUNJTElUWQMgOiAEdGVzdGQCBA9kFgJmDxUEAjU4DVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI2MQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIHDxYCHwBmZGQolRp/M4dzIRG65MxM4hACjSHkZw=="&gt; &lt;/div&gt; &lt;div style="margin:45px 50px 10px 15px;"&gt; &lt;input type="button" id="connectionButton" value="Connections" class="bigButton jquery-ui-button ui-button ui-widget ui-state-default ui-corner-all" onclick="$(&amp;#39;#connectionsModal&amp;#39;).dialog(&amp;#39;open&amp;#39;); return false;" role="button"&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;div id="lastInsertedTable" class="repeater ui-helper-clearfix"&gt; &lt;span&gt;Recently Added&lt;/span&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;span style="float:left;width:100%;height:1px;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;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"&gt;&lt;div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"&gt;&lt;span class="ui-dialog-title" id="ui-dialog-title-connectionsModal"&gt;Connections&lt;/span&gt;&lt;a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"&gt;&lt;span class="ui-icon ui-icon-closethick"&gt;close&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="connectionsModal" class="m_dialog ui-dialog-content ui-widget-content" style="min-height: 80px; width: auto; height: auto; "&gt; &lt;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"&gt;&lt;span class="ui-button-text" style="padding-left: 109.5px; "&gt;Add&lt;/span&gt;&lt;/a&gt; &lt;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"&gt;&lt;span class="ui-button-text" style="padding-left: 81px; "&gt;Search/Edit&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"&gt;&lt;div class="ui-dialog-buttonset"&gt;&lt;button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"&gt;&lt;span class="ui-button-text"&gt;Cancel&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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