Friday, January 15, 2010

IE Bug: Embedded CSS Styles within AJAX UpdatePanel

Scenario
  • You have a Web UserControl with embedded <style> tags within an UpdatePanel.
Issue
  • Internet Explorer: After an Asynchronous postback some of the Styles are no longer applied.

    • In my case the height property on a div.  This was confusing since the code was expanding/collapsing the div, but the bug was ignoring the style.

  • If you check the source via IE Developer Toolbar you will see that the style is supposed to be applied.
Resolution
  • I was able to resolve this by moving the <style> section to the bottom of the UpdatePanel.

    • I don't know why this works.

  • The best solution is to move the <style> section to the Master Page or Aspx Page <header> section.

    • This is the only approved location for embedded Styles.
    • You can alternatively include a css file.

  • Another alternative is to RegisterClientScriptBlock the style or an external css reference from the UserControl


Sample Code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <style type="text/css">
            div
            {
                display:block;
                overflow:auto;
            }
            .collapsed 
            {
             height:50px;         
            }
            .expanded
            {
             height:inherit;
            }
        </style>
        <asp:Panel CssClass="collapsed" runat="server" ID="pnlMain">
            1<br />2<br />3<br />4<br />5<br />6<br />
        </asp:Panel>
        <asp:Button ID="btnExpCol" runat="server" Text="Expand" />

    </ContentTemplate>
</asp:UpdatePanel>

No comments:

Post a Comment