嘿Stack,需要一些关于jQuery UI对话框样式的帮助。你可以看到这里发生了什么:http://img714.imageshack.us/i/jquerydialogstylingissu.png/。jQuery UI对话框样式 - 溢出?
验证消息和左上角的图标都被切断。我认为这是因为.ui-dialog有“overflow:hidden”,但删除它没有任何效果(我可以看到)。任何人都可以提供任何建议,让这些显示正确吗?
连接左上角的图标后,标题栏的HTML是:
<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>
编辑(感谢立方眼睛工作室):
更改的.ui-对话框的.ui-对话内容到“overflow:visible”修复了这个问题,但是您将失去内容区域的自动滚动并且可能会在标题栏中获得意想不到的结果(假设首先有一个溢出隐藏在标题中的原因。没有注意到任何不同)。失去汽车卷轴是一件大事。任何建议来解决这个问题将不胜感激。谢谢。
附加代码:
<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>
工具提示解决方案(仅适用于这个特定的工具提示插件)
更改getCropping()的工具提示动态插件功能,使其作品在内容容器而不是窗口。
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
];
}
谢谢。在CSS中将溢出更改为“可见”。你能解释为什么删除“overflow:hidden”没有相同的效果吗?不是溢出的默认值“可见”?将.ui-dialog-content更改为overflow:visible也会阻止验证消息被切断,但是您失去了自动滚动条功能。任何想法? – Brett 2010-11-05 03:34:32
我不确定为什么overflow:visible需要设置,因为正如你所说它是默认值,但它看起来像浏览器默认溢出为auto。至于验证信息,我不认为溢出是最好的选择,z-index会更好。你可以发布一些更多的代码 – 2010-11-05 03:49:10
我已经尝试z-index为他们两个(http://stackoverflow.com/questions/4066525/jquery-tooltips-and-dialog/4066818#4066818)。对不起,不提。 – Brett 2010-11-05 04:04:12