Why does ModalPopupExtender not work when I move its target panel's style from hardcoded to CSS?

Question

I have a ModalPopupExtender set up on a page and working great. It's tied to a panel with some style attributes hardcoded into its tag. I'm trying to get all my styles out of my markup into CSS, but when I move these styles into a class, the popup fails to work. What's going on?

Styles in CSS:

.class1
{
    border: solid 1px black;
    display: none;
    width: 700px;
    height: 400px;
    background-color: gray;
    overflow: scroll;
}
.class2
{
    background-color: White;
    height: 90%;
    width: 95%;
}
.backgroundClass
{
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

Panel:

<asp:Panel ID="pnlModalContainer" runat="server"  CssClass="class1">
    <asp:Panel ID="pnlModalHandle" runat="server">
        <table cellpadding="0" cellspacing="0" border="0" width="650px">
            <tr>
                <td>
                    Content Here&nbsp;|&nbsp;
                    <asp:Label ID="lblTitle" runat="server" Text=""></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
    <div style="padding-left: 25px;">
        <table cellpadding="1" cellspacing="0" border="0" class="class2">
            <tr valign="top">
                <td>
                    <asp:UpdatePanel ID="udpPopups" runat="server">
                        <ContentTemplate>
                            ...content here...
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr valign="bottom">
                <td align="right" style="padding-bottom: 5px; padding-right: 5px;">
                    <asp:Button ID="btnModalOk" runat="server" Text="Ok" />&nbsp;&nbsp;
                    <asp:Button ID="btnModalCancel" runat="server" Text="Cancel" CausesValidation="false" />
                </td>
            </tr>
        </table>
    </div>
</asp:Panel>

And the MPE:

<cc1:ModalPopupExtender ID="mpeAction" runat="server" PopupControlID="pnlModalContainer"
TargetControlID="fakeButton" BackgroundCssClass="backgroundClass" DropShadow="false"
PopupDragHandleControlID="pnlModalHandle" RepositionMode="RepositionOnWindowResizeAndScroll" />

This is in ASP .NET 2.0. Set up like this, I see the background show up, but the popup doesn't come up. But if I move the contents of class1 down to the markup as a style, it works great. The popup gets shown via Javascript emitted from VB code-behind, using ScriptManager.RegisterStartupScript().

UPDATE: I've seen this on other controls too; AJAX toolkit controls seem to like their layout styles inline, not in a stylesheet. Why is this?

score 0 · Answer 1 · answered Sep 19 '11 at 16:58

It's possible that the specificity of the styles in the stylesheet is lower than the specificity of the inline styles. Try adding !important to the end of each property value. As in:

.class1
{
    border: solid 1px black !important;
    display: none !important;
    width: 700px !important;
    height: 400px !important;
    background-color: gray !important;
    overflow: scroll !important;
}
...

If that changes things, then you need a "more specific" selector than ".class1".

See: CSS Specificity

Why does ModalPopupExtender not work when I move its target panel's style from hardcoded to CSS?

1 Answers1