Question

Solved: See comments below.

---

I’ve created a Tabs inside of a Dialog box, but the height of the Dialog does not correspond with the height of the tab.

In this particular case, there is a form inside of the tab. If the user submits the form and there are errors present, the tab’s height will increase to display the errors. However, the height of the parent dialog does not automatically resize to match the height of the tab inside.

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

How can I fix this?

Answer 1

The problem was that the following default jQuery UI CSS:

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

…had received an extra line of CSS making it impossible for the contents in the tab to resize automatically:

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