locked
CollapsiblePanelExtender height RRS feed

  • Question

  • User351619809 posted

    Hello,

    I have the following CollapsiblePanelExtender on my web form. Is it possible to extend the height of the CollapsiblePanelExtender all the way to the bottom of the page. below is my code:

       <title></title>
         <style type="text/css">
            .cpHeader
            {
                color: white;
                background-color: #719DDB;
                font: bold 11px auto "Trebuchet MS", Verdana;
                font-size: 12px;
                cursor: pointer;
                width:450px;
                height:18px;
                padding: 4px;           
            }
            .cpBody
            {
                background-color: #DCE4F9;
                font: normal 11px auto Verdana, Arial;
                border: 1px gray;               
                width:450px;
                padding: 4px;
                padding-top: 7px;
                 height: 0;
                overflow: hidden;
                margin-bottom:300px;
            }    
            .collapsiblePanelContainer {
                        height: 0;
                        overflow: hidden;
    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
                    <asp:Label ID="lblText" runat="server" />
                </asp:Panel>
     
                <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
                   
                </asp:Panel>
     
    <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
    Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.."  ExpandedText="Click to Hide Content.."
    CollapsedSize="0" ExpandDirection="vertical" ExpandedSize="5000"  >
                </cc1:CollapsiblePanelExtender>
               
            </ContentTemplate>
            </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    

    any help will be highly apprecaited

    Wednesday, January 6, 2021 3:22 AM

Answers

  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    As I said before, you have to include jQuery library in the page.

    For example, you could add below jQuery cdn inside the <head> tags.

     <!-- jQuery library -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    The whole page should be looking like:

    <head runat="server">
        <title></title>
        <!-- jQuery library -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    
        <style type="text/css">
            .cpHeader {
                color: white;
                background-color: #719DDB;
                font: bold 11px auto "Trebuchet MS", Verdana;
                font-size: 12px;
                cursor: pointer;
                width: 450px;
                height: 18px;
                padding: 4px;
            }
    
            .cpBody {
                background-color: #DCE4F9;
                font: normal 11px auto Verdana, Arial;
                border: 1px gray;
                width: 450px;
                padding: 4px;
                padding-top: 7px;
                overflow: hidden;
                margin-bottom: 300px;
            }
    
            .collapsiblePanelContainer {
                height: 0;
                overflow: hidden;
            }
        </style>
           <script>
               $(function () {
                   $('#<%=pHeader.ClientID%>').on('click', function (e) {
                      // $find is not a jquery function here, it is defined in MicrosoftAjax.js which represents "Sys.Application.findComponent" to find behavior of this extender
                    var collPanel = $find('<%=CollapsiblePanelExtender1.ClientID%>');
                    // If collPanel is expanded, reset the height
                    if (!collPanel.get_collapsed()) {
                        // get expandedSize as you set in CollapsiblePanelExtender control
                        var height = collPanel.get_expandedSize();
                        $('#<%=pBody.ClientID%>').height(height);
                    }
    
                })
            })
           </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
                            <asp:Label ID="lblText" runat="server" />
                        </asp:Panel>
    
                        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
                   
                        </asp:Panel>
    
                        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
                            Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.."
                            CollapsedSize="0" ExpandDirection="vertical" ExpandedSize="5000"></cc1:CollapsiblePanelExtender>
    
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
    
        </form>
    </body>

    Otherwise, if you want to write pure javascript codes, you could use below js codes without jQuery reference.

    <script>
    
            document.addEventListener('DOMContentLoaded', (event) => {
                var pheader = document.getElementById('<%=pHeader.ClientID%>');
                pheader.addEventListener("click", function (e) {
                      //$find is not a jquery function here, it is defined in MicrosoftAjax.js which represents "Sys.Application.findComponent"
                      var collPanel = $find('<%=CollapsiblePanelExtender1.ClientID%>');
                      console.log(collPanel);
                      // If collPanel is expanded, reset the height
                      if (!collPanel.get_collapsed()) {
                          // get expandedSize as you set in CollapsiblePanelExtender control
                          var height = collPanel.get_expandedSize();
                          console.log(height);
                          var pbody = document.getElementById('<%=pBody.ClientID%>');
                          console.log(pbody);
                          pbody.style.height = height+'px';
                      }
                  })
              });
    
        </script>

    Both should be working.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 7, 2021 4:45 AM

All replies

  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    The height is reset by the extender js function and if you check the height property in dev tool, you will find that the height has been changed to 'auto' which means it will automatically adjust to fit the content of the pBody.

    You could simply include the jquery and reset the height using js scripts as below.

     <form id="form1" runat="server">
    
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
                            <asp:Label ID="lblText" runat="server" />
                        </asp:Panel>
    
                        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
                   
                        </asp:Panel>
    
                        <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
                            Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.."
                            CollapsedSize="0" ExpandDirection="vertical" ExpandedSize="5000"></ajaxToolkit:CollapsiblePanelExtender>
    
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
    
        </form>
        <script>
            $(function () {
                $('#<%=pHeader.ClientID%>').on('click', function (e) {
                    var collPanel = $find('<%=CollapsiblePanelExtender1.ClientID%>');
                    // If collPanel is expanded, reset the height
                    if (!collPanel.get_collapsed()) {
                        // get expandedSize as you set in CollapsiblePanelExtender control
                        var height = collPanel.get_expandedSize();
                        $('#<%=pBody.ClientID%>').height(height);
                    }
                    
                })
            })
        </script>

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    Wednesday, January 6, 2021 1:54 PM
  • User351619809 posted
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="HeartLandiAPI.WebForm3" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <style type="text/css">
            .cpHeader
            {
                color: white;
                background-color: #719DDB;
                font: bold 11px auto "Trebuchet MS", Verdana;
                font-size: 12px;
                cursor: pointer;
                width:450px;
                height:18px;
                padding: 4px;           
            }
            .cpBody
            {
                background-color: #DCE4F9;
                font: normal 11px auto Verdana, Arial;
                border: 1px gray;               
                width:450px;
                padding: 4px;
                padding-top: 7px;
                 height: 0;
                overflow: hidden;
                margin-bottom:300px;
            }    
            .collapsiblePanelContainer {
                        height: 0;
                        overflow: hidden;
    }
        </style>
            <script>
                $(function () {
                    $('#<%=pHeader.ClientID%>').on('click', function (e) {
                    var collPanel = $find('<%=CollapsiblePanelExtender1.ClientID%>');
                    // If collPanel is expanded, reset the height
                    if (!collPanel.get_collapsed()) {
                        // get expandedSize as you set in CollapsiblePanelExtender control
                        var height = collPanel.get_expandedSize();
                        $('#<%=pBody.ClientID%>').height(height);
                    }
    
                })
            })
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
                    <asp:Label ID="lblText" runat="server" />
                </asp:Panel>
     
                <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
                   
                </asp:Panel>
     
    <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
    Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.."  ExpandedText="Click to Hide Content.."
    CollapsedSize="0" ExpandDirection="vertical" ExpandedSize="5000"  >
                </cc1:CollapsiblePanelExtender>
               
            </ContentTemplate>
            </asp:UpdatePanel>
            </div>
        </form>
    
    </body>
        
    </html>
    



    Wednesday, January 6, 2021 7:46 PM
  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    As I said before, you have to include jQuery library in the page.

    For example, you could add below jQuery cdn inside the <head> tags.

     <!-- jQuery library -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    The whole page should be looking like:

    <head runat="server">
        <title></title>
        <!-- jQuery library -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    
        <style type="text/css">
            .cpHeader {
                color: white;
                background-color: #719DDB;
                font: bold 11px auto "Trebuchet MS", Verdana;
                font-size: 12px;
                cursor: pointer;
                width: 450px;
                height: 18px;
                padding: 4px;
            }
    
            .cpBody {
                background-color: #DCE4F9;
                font: normal 11px auto Verdana, Arial;
                border: 1px gray;
                width: 450px;
                padding: 4px;
                padding-top: 7px;
                overflow: hidden;
                margin-bottom: 300px;
            }
    
            .collapsiblePanelContainer {
                height: 0;
                overflow: hidden;
            }
        </style>
           <script>
               $(function () {
                   $('#<%=pHeader.ClientID%>').on('click', function (e) {
                      // $find is not a jquery function here, it is defined in MicrosoftAjax.js which represents "Sys.Application.findComponent" to find behavior of this extender
                    var collPanel = $find('<%=CollapsiblePanelExtender1.ClientID%>');
                    // If collPanel is expanded, reset the height
                    if (!collPanel.get_collapsed()) {
                        // get expandedSize as you set in CollapsiblePanelExtender control
                        var height = collPanel.get_expandedSize();
                        $('#<%=pBody.ClientID%>').height(height);
                    }
    
                })
            })
           </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
                            <asp:Label ID="lblText" runat="server" />
                        </asp:Panel>
    
                        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
                   
                        </asp:Panel>
    
                        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
                            Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.."
                            CollapsedSize="0" ExpandDirection="vertical" ExpandedSize="5000"></cc1:CollapsiblePanelExtender>
    
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
    
        </form>
    </body>

    Otherwise, if you want to write pure javascript codes, you could use below js codes without jQuery reference.

    <script>
    
            document.addEventListener('DOMContentLoaded', (event) => {
                var pheader = document.getElementById('<%=pHeader.ClientID%>');
                pheader.addEventListener("click", function (e) {
                      //$find is not a jquery function here, it is defined in MicrosoftAjax.js which represents "Sys.Application.findComponent"
                      var collPanel = $find('<%=CollapsiblePanelExtender1.ClientID%>');
                      console.log(collPanel);
                      // If collPanel is expanded, reset the height
                      if (!collPanel.get_collapsed()) {
                          // get expandedSize as you set in CollapsiblePanelExtender control
                          var height = collPanel.get_expandedSize();
                          console.log(height);
                          var pbody = document.getElementById('<%=pBody.ClientID%>');
                          console.log(pbody);
                          pbody.style.height = height+'px';
                      }
                  })
              });
    
        </script>

    Both should be working.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 7, 2021 4:45 AM