javascript - 对话框内的选项卡导致对话框的高度为 :auto to not work

Question

已解决:请参阅下面的评论。

---

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

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

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

我该如何解决这个问题？

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