Databases
StackOverflow2013
Postsdbo
POjQuery UI Dialog Styling - Overflow?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Dialog Styling - Overflow?
    text
    copied!<p>Hey Stack, need some assistance with the styling of jQuery UI Dialogs. You can see what is happening here: <a href="http://img714.imageshack.us/i/jquerydialogstylingissu.png/" rel="nofollow">http://img714.imageshack.us/i/jquerydialogstylingissu.png/</a>.</p> <p>The Validation Message and the Icon in the top left are both being cut off. I thought it was because .ui-dialog has "overflow: hidden", but removing that has no effect (that I could see). Can anyone offer any suggestions to get these displaying correctly?</p> <p>The HTML for the title bar after attaching the top left icon is:</p> <pre><code>&lt;div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"&gt; &lt;img style="position: absolute; left: -28px; top: -25px; z-index: 2147483647;" src="/img/browser.png"&gt; &lt;span class="ui-dialog-title" id="ui-dialog-title-TaskEditWindow"&gt;Task Details&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; </code></pre> <p>Edit (Thanks to Cubed Eye Studios):</p> <p>Changing .ui-dialog and .ui-dialog-content to "overflow: visible" fixes this, however you will lose the auto-scroll on the content area and may get unexpected results for the title bar (Assuming there was a reason for overflow to be hidden on titles in the first place. I have not noticed anything different.). Losing the auto scroll is a big deal. Any suggestions to work around that would be greatly appreciated. Thanks.</p> <p>Additional Code:</p> <pre><code>&lt;div style="display: block; z-index: 1004; outline: 0px none; height: auto; width: auto; top: 157px; left: 756px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-StageEditWindow"&gt; &lt;div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"&gt; &lt;img style="position: absolute; left: -23px; top: -20px;" src="/img/browser.png"&gt; &lt;span class="ui-dialog-title" id="ui-dialog-title-StageEditWindow"&gt;Stage Details&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 style="width: auto; min-height: 50.8px; height: auto;" id="StageEditWindow" class="ui-dialog-content ui-widget-content"&gt; &lt;div class="screens-container"&gt; &lt;div id="DetailsScreen"&gt; &lt;form id="StageEditForm" action="#" onsubmit="return false;"&gt; &lt;fieldset id="DetailsFieldSet"&gt; &lt;div&gt; &lt;label class="label" for="StageName"&gt;Name:&lt;/label&gt; &lt;input type="text" class="input required validation-failed" name="Name" id="StageName"&gt; &lt;label for="StageName" generated="true" class="validation-failed" style="position: absolute; top: -121.95px; left: 107.1px; opacity: 0; display: none;"&gt;This field is required.&lt;/label&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&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 class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"&gt;&lt;span class="ui-button-text"&gt;Save&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Tooltip Solution (only for this particular tooltip plugin)</strong></p> <p>Change the getCropping() function in the dynamic plugin for the tooltip, so that it works on the content container rather than the window.</p> <pre><code>function getCropping(el) { var w = $(el).closest('.ui-dialog-content'); var right = w.offset().left + w.width(); var bottom = w.offset().top + w.height(); var toolTipRight = el.offset().left + el.width(); var toolTipBottom = el.offset().top + el.height(); return [ el.offset().top &lt;= w.offset().top, // top right &lt;= toolTipRight, // right bottom &lt;= toolTipBottom, // bottom w.offset().left &gt;= el.offset().left // left ]; } </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