nrvbha nrvbha - 11 months ago 56
ASP.NET (C#) Question

invisible controls in takes up space in

I have an web application. I have one textbox (txtProductName) and one dropdownlist (ddlChanges) visible at the time of page load. Also there is a textbox (txtDeliveryStatus) and a label (lblDeliveryStatus) invisible at page load.

<asp:TextBox ID="txtProductName" runat="server" CssClass="selectstyle" MaxLength="8" Width="60" />

<asp:Label ID="lblDeliveryStatus" runat="server" Style="visibility: hidden;">Delivery Status : </asp:Label>
<asp:TextBox ID="txtDeliveryStatus" runat="server" CssClass="selectstyle" Style="visibility: hidden;"/>

<asp:DropDownList runat="server" ID="ddlChanges" CssClass="selectstyle" onchange="javascript:ddlChangesChanged();">
<asp:ListItem Text="-- Select -- " Value="-1"></asp:ListItem>
<asp:ListItem Text="Status Change" Value="1"></asp:ListItem>
<asp:ListItem Text="Product Name Change" Value="2"></asp:ListItem>
<asp:ListItem Text="Category Change" Value="3"></asp:ListItem>

I will make the label and textbox for delivery status visible when user selects Status Change from the dropdown list. But the problem is that the label and textbox for delivery status are invisible and still they take up some space on the page between visible controls.

How to remove that space of invisible controls?

Answer Source

You should use the display attribute:

<asp:Label ID="lblDeliveryStatus" runat="server" Style="display: none;">Delivery Status : </asp:Label>

<asp:TextBox ID="txtDeliveryStatus" runat="server" CssClass="selectstyle" Style="display: none;"/>

For completeness you can check this link.