Friday, January 15, 2010

IE Bug: Embedded CSS Styles within AJAX UpdatePanel

  • You have a Web UserControl with embedded <style> tags within an UpdatePanel.
  • 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.
  • 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">
        <style type="text/css">
        <asp:Panel CssClass="collapsed" runat="server" ID="pnlMain">
            1<br />2<br />3<br />4<br />5<br />6<br />
        <asp:Button ID="btnExpCol" runat="server" Text="Expand" />


No comments:

Post a Comment