jQuery UI Dialog Styling - Overflow?

Hey Stack, need some assistance with the styling of jQuery UI Dialogs. You can see what i开发者_如何学Cs 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
    ];
}

---

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?

---

I'm not overly familiar with that tooltip plugin, but I imagine that the tooltips are placed absolutely. I made this demo that seemed to work correctly, maybe you can translate it to the plugin.

<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>

I just made sure that the z-index of the content part is bigger that the title part. Not sure if this is any help but give it a try. Also make them both relative, instead of absolute.