JQuery UI Dialog Styling - Overflow?

Question

Hi Stack, you need some help with jQuery UI Dialogs design. You can see what happens here: http://img714.imageshack.us/i/jquerydialogstylingissu.png/ .

The verification message and the icon in the upper left corner are clipped. I thought this was because the .ui-dialog has "overflow: hidden", but deleting this has no effect (which I could see). Can anyone suggest any suggestions to display them correctly?

HTML for the title after attaching the upper left icon:

<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 the .ui-dialog and .ui-dialog-content dialog boxes to “overflow: visible” fixes this, however, you will lose autoscrolling in the content area and may get unexpected results for the header (assuming that the reason for the overflow should be hidden in the headers in First of all. I did not notice anything else.). Losing autoscrolling is a big deal. Any suggestions on working on this would be greatly appreciated. Thank.

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 special tooltip plugin)

Modify the getCropping () function in the dynamic tooltip plugin so that it works in the content container, not in 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

.

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

z-index, - ?

Answer 2

, , . , , , , , .

<div class="ui-dialog" style="overflow:visible;">
   <div class="ui-dialog-title" style="position:relative; z-index:5">Title Bar</div>
   <div class="ui-dialog-content" style="position:relative; z-index:10">
      Content Here
      <div class="tooltip" style="position:absolute; top:-4px;">
           Tooltip Content
      </div>
   </div>
</div>

, z- , . , , . , .