Tuesday, December 09, 2008
by
ASP.NET AJAX Team
|
Comments
If you are using asp:HiddenField controls (rendered as <input type="hidden" />) in your website and update their values with AJAX requests, you may observe some unexpected changes in the page layout in Internet Explorer (IE). It will seem that an empty line is inserted at each location where a HiddenField control resides. The behavior is observed only in IE and looks like a problem caused by the browser or the MS AJAX client-side framework.
A quite easy workaround for this glitch is to wrap the HiddenField in a container with no height and reduced font size. Here is an example:
| <%@ Page Language="C#" %> |
| |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>Ajaxified asp:HiddenField in Internet Explorer</title> |
| <style type="text/css"> |
| |
| .HiddenFieldDiv |
| { |
| font-size:1px; |
| height:0; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| |
| <p>Below this paragrapgh there are two ajaxified asp:HiddenField controls, separated by |
| horizontal rules. <strong>Internet Explorer</strong> expands those after an AJAX request, so |
| a little CSS workaround is required in order to preserve the page layout.</p> |
| |
| <hr /> |
| |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <asp:HiddenField ID="HiddenField1" runat="server" Value="1" /> |
| </ContentTemplate> |
| <Triggers> |
| <asp:AsyncPostBackTrigger ControlID="Button1" /> |
| </Triggers> |
| </asp:UpdatePanel> |
| |
| <hr /> |
| |
| <div class="HiddenFieldDiv"> |
| <asp:UpdatePanel ID="UpdatePanel2" runat="server"> |
| <ContentTemplate> |
| <asp:HiddenField ID="HiddenField2" runat="server" Value="1" /> |
| </ContentTemplate> |
| <Triggers> |
| <asp:AsyncPostBackTrigger ControlID="Button1" /> |
| </Triggers> |
| </asp:UpdatePanel> |
| </div> |
| |
| <hr /> |
| |
| <p><asp:Button ID="Button1" runat="server" Text="Initiate Ajax Request" /></p> |
| |
| <p>The second HiddenField control is wrapper inside a div, which has its font-size set to 1px |
| and the height is 0px. This prevents the HiddenField control from expanding in IE.</p> |
| |
| </form> |
| </body> |
| </html> |
| |