I have an update panel in a user control which is contained in a parent page. The update panel has async triggers which refer to buttons outside of the update panel. The update panel containts a literal control that has the .Text value set via code depending on which button is clicked. NOTE: The literal is used for displaying the results of a transform XML=>HTML. The buttons, when clicked, cause an async postback and the appropriate code executes. The problem is that initially the css styling for the update panel works (the literal control has default content) but when the buttons(triggers) are clicked the styling is messed up (absolute positioning does not work). Also, the buttons disappear completely.
What is strange is that if I "wrap" the literal control in <fieldset><legend> tags, everything works correctly. Any ideas on why this happens or suggestions ?
<html>
<head id="Head1" runat="server">
<style type="text/css">
#UpdatePanel1 {
height: 600px;
width: 400px;
border: 1px solid #666666;
padding: 8px;
position: absolute;
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Next" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Prev" /></div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
<asp:AsyncPostBackTrigger ControlID="Button2" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="Literal1"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>