对话框内的选项卡导致对话框的高度：自动不起作用答案

【问题标题】：Tabs inside of a Dialog causes the Dialog's height:auto to not work对话框内的选项卡导致对话框的高度：自动不起作用
【发布时间】：2011-09-08 02:47:14
【问题描述】：

已解决：见下面的 cmets。

我在对话框中创建了一个选项卡，但对话框的高度与选项卡的高度不对应。

在这种特殊情况下，选项卡内有一个表单。如果用户提交表单并且存在错误，则选项卡的高度将增加以显示错误。但是，父对话框的高度不会自动调整大小以匹配内部选项卡的高度。

|-tab1-|-tab2-|------|
|                    |
|-(end of dialog)----| (text stops here)
 |                  |
 |                  |
 |                  |
 |-(end of tab)-----| (not visible)

我该如何解决这个问题？

【问题讨论】：

嗯，奇怪，我在一个非常大的系统上也有相同的设置，它没有任何问题......你能在 JSFiddle 之类的东西上复制这个问题并向我们展示代码吗？跨度>
您将哪些选项传递给对话框/选项卡？我会尝试重新创建它并发布一个链接。
原来是在 jQuery UI 样式表中为类 .ui-tabs .ui-tabs-panel 设置的流氓 position:absolute 导致了问题。删除之后，问题就消失了。
很高兴你知道了！
Ryan，您能否发布您的解决方案的扩展描述作为答案，以防其他人将来遇到同样的问题？

标签： javascript jquery html css jquery-ui

【解决方案1】：

问题在于以下默认的 jQuery UI CSS：

.ui-tabs .ui-tabs-panel { 
    display: block;
    border-width: 0; 
    padding: 1em 1.4em;
    background: none;
}

...收到了一行额外的 CSS，导致选项卡中的内容无法自动调整大小：

.ui-tabs .ui-tabs-panel { 
    display: block;
    border-width: 0; 
    padding: 1em 1.4em;
    background: none;
    position: absolute; //This line was causing the problem
}

【讨论】：