How to collapse a control or a panel after setting the visible property to false on server side.

Question

User1864553114 posted

How to collapse a control(Text Box or Label) or a panel containing set of controls in ASP.Net after setting the Panel.visible=false on server side. I don't want a gap to displayed  after hiding the control in the form.

Answer 1

User475983607 posted

How to collapse a control(Text Box or Label) or a panel containing set of controls in ASP.Net after setting the Panel.visible=false on server side. I don't want a gap to displayed  after hiding the control in the form.

It is impossible to answer UI questions without an understanding of how the layout is designed.  All the major browsers have developer tools (F12) which aid in troubleshooting UI issues. 

Answer 2

User-832373396 posted

Hi Ayub Khan,

Ayub Khan M

I don't want a gap to displayed  after hiding the control in the form.

 After tested the generic code on local, it seems that it will not show and doesn't take any space; 

So please have a check if exists other reason.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
   
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    <h3>Your application description page.</h3>
    <p>Use this area to provide additional information.</p>
   <asp:Panel id=Panel2 runat="server">Panel2</asp:Panel>
   <asp:Panel id=Panel3 runat="server">Panel3</asp:Panel>
   <asp:Panel id=Panel1 runat="server">Panel1</asp:Panel>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </ContentTemplate>
      </asp:UpdatePanel>
</asp:Content>

and back-code:

   public partial class About : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Panel2.Visible = false;
        }
    }

Result: After <g class="gr_ gr_15 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="15" data-gr-id="15">click</g> the button, the panel2 hide directly, no refresh, no gap.

And reference:

Using the F12 Developer Tools to Debug JavaScript Errors

https://msdn.microsoft.com/en-us/library/gg699336(v=vs.85).aspx

and it seems that what you exactly need is in your another thread and I have posted my answer in it :)

Best regards, Angelina Jolie