Question

Hey Stack, need some assistance with the styling of jQuery UI Dialogs. You can see what is happening here: http://img714.imageshack.us/i/jquerydialogstylingissu.png/.

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?

The HTML for the title bar after attaching the top left icon is:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<img style="position: absolute; left: -28px; top: -25px; z-index: 2147483647;" src="/img/browser.png">
<span class="ui-dialog-title" id="ui-dialog-title-TaskEditWindow">Task Details</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span></a>
</div>

Edit (Thanks to Cubed Eye Studios):

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.

Additional Code:

<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">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <img style="position: absolute; left: -23px; top: -20px;" src="/img/browser.png">
        <span class="ui-dialog-title" id="ui-dialog-title-StageEditWindow">Stage Details</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 style="width: auto; min-height: 50.8px; height: auto;" id="StageEditWindow" class="ui-dialog-content ui-widget-content">
        <div class="screens-container">
            <div id="DetailsScreen">
                <form id="StageEditForm" action="#" onsubmit="return false;">
                    <fieldset id="DetailsFieldSet">
                        <div>
                            <label class="label" for="StageName">Name:</label>
                            <input type="text" class="input required validation-failed" name="Name" id="StageName">
                            <label for="StageName" generated="true" class="validation-failed" style="position: absolute; top: -121.95px; left: 107.1px; opacity: 0; display: none;">This field is required.</label>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button>
        </div>
    </div>
</div>

Tooltip Solution (only for this particular tooltip plugin)

Change the getCropping() function in the dynamic plugin for the tooltip, so that it works on the content container rather than the window.

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 <= w.offset().top,                      // top
        right <= toolTipRight,          // right
        bottom <= toolTipBottom,        // bottom
        w.offset().left >= el.offset().left                     // left
    ];
}

Answer 1

For the icon, just make the overflow on the dialog visible.

<div class="ui-dialog" style="overflow:visible">

The Validation message looks like a z-index thing, can you post some more code?