Question

I think this is an !important issue. I have a dialog with a set overlay like this:

.ui-widget-overlay 
{
    width: 518px !important;
}

The height of the overlay will be set in my Javascript depending on what the page size is (It can be one of two sizes)

        if (!placeHolderVisibility) {
            //Code

            $('.ui-widget-overlay').addClass('overlayLarge');
        } else {
            //Code

            $('.ui-widget-overlay').addClass('overlaySmall');
        }

Here is the overlaySmall and overlayLarge css:

.overlaySmall
{
    height: 985px !important;
}

.overlayLarge
{
    height: 1167px !important;
}

I have other pages with dialog boxes and they do not have the issue.

.ui-widget-overlay 
{
    height: 413px !important;
    width: 510px !important;
}

When I try to inspect the overlay in firebug I notice that !important is not in the css, but I cannot get the initial height (it expands to fast)

Edit I think its a facebook issue with their auto resize

FB.init({ appId: appid, status: true, cookie: true, xfbml: true });
        FB.Canvas.setAutoResize(); //<-- Something wrong with this maybe??

Any suggestions?

Answer 1

Copypasta’d at request of the OP:

Why are you using !important? It’s generally a bad idea with better alternatives.

You just need to use a more-specific CSS selector than the jQuery one, or use the exact same selector but make sure that your CSS comes after jQuery’s. Using !important breaks the natural cascading of CSS and makes maintenance much harder (as you’re experiencing firsthand).