Telerik blogs

Taming Ajaxified asp:HiddenField Controls in Internet Explorer

by Iana Tsolova
December 09, 2008 Web, ASP.NET AJAX 0 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> 
 

 

ASP.NET, ASP.NET AJAX, Web Forms
About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Web Blazor ASP.NET MVC ASP.NET Core ASP.NET AJAX Release

What’s New in Telerik Web UI Component Libraries with R2 2023

Release Web Mobile Desktop Productivity

The Telerik and Kendo UI R2 2023 Release Is Here—See What’s New!

Comments

Comments are disabled in preview mode.