I am facing a puzzling issue with my Textboxes setup, defined as below:
<table style="width: 100%; position: relative; top: -10px;">
<tr>
<td style="font-size: 9pt; text-align: left;">
<asp:TextBox ID="multiHandle2_1_BoundControl" BackColor="Transparent" BorderStyle="None"
Font-Size="9pt" runat="server" Width="30" Text="25" /><span style="position: relative;
left: -11px;">DKK</span>
</td>
<td style="font-size: 9pt; text-align: right; float: right;">
<asp:TextBox ID="multiHandle2_2_BoundControl" runat="server" Width="30" BackColor="Transparent"
BorderStyle="None" Font-Size="9pt" /><span style="position: relative; left: -5px;">DKK</span>
</td>
</tr>
</table>
Almost always, this setup functions correctly. However, when using output caching, I have noticed that sometimes the HTML rendering is incorrect. Let's examine the rendered HTML.
During the instances when the rendering is wrong (roughly 95% of occurrences), the following attributes on my textbox get removed:
BackColor="Transparent" BorderStyle="None"
Font-Size="9pt" Width="30" Text="25"
This behavior is quite bizarre, considering that most times the attributes are applied correctly.
Correct rendering looks like this:
<table style="width: 100%; position: relative; top: -10px;">
<tr>
<td style="font-size: 9pt; text-align: left;">
<input name="ctl00$ctl00$ContentPlaceHolder1$LeftSidebar$Filters1$multiHandle2_1_BoundControl" type="text" value="149" id="ContentPlaceHolder1_LeftSidebar_Filters1_multiHandle2_1_BoundControl" style="background-color:Transparent;border-style:None;font-size:9pt;width:30px;" /><span style="position: relative;
left: -11px;">DKK</span>
</td>
<td style="font-size: 9pt; text-align: right; float: right;">
<input name="ctl00$ctl00$ContentPlaceHolder1$LeftSidebar$Filters1$multiHandle2_2_BoundControl" type="text" value="249" id="ContentPlaceHolder1_LeftSidebar_Filters1_multiHandle2_2_BoundControl" style="background-color:Transparent;border-style:None;font-size:9pt;width:30px;" /><span style="position: relative; left: -5px;">DKK</span>
</td>
</tr>
</table>
Incorrect rendering looks like this (occurs quite often, but not always). The styles on my input are missing::
<table style="width: 100%; position: relative; top: -10px;">
<tr>
<td style="font-size: 9pt; text-align: left;">
<input name="ctl00$ctl00$ContentPlaceHolder1$LeftSidebar$Filters1$multiHandle2_1_BoundControl" type="text" value="13" id="ContentPlaceHolder1_LeftSidebar_Filters1_multiHandle2_1_BoundControl" /><span style="position: relative;
left: -11px;">DKK</span>
</td>
<td style="font-size: 9pt; text-align: right; float: right;">
<input name="ctl00$ctl00$ContentPlaceHolder1$LeftSidebar$Filters1$multiHandle2_2_BoundControl" type="text" value="249" id="ContentPlaceHolder1_LeftSidebar_Filters1_multiHandle2_2_BoundControl" /><span style="position: relative; left: -5px;">DKK</span>
</td>
</tr>
</table>
ASP.NET seems to be acting up. Quite frustrating, isn't it? 😉