locked
AJAX collapsible extender creates a div wrapper with overflow:hidden RRS feed

  • Question

  • User-1378710312 posted

    <asp:Panel ID="pHeaderBiolist" runat="server" CssClass="accordionHeaderSelected">

    <div class="studentheader_divs">
    <div class="headerleft_div">Search Results</div>

    <div style="float: right; padding: 5px 2px;">

    <asp:ImageButton ID="imgcollapsibleinst" Height="22px" Width="20px" ImageUrl="~/Images/Expanded.png" runat="server" />
    <%--OnClientClick="return collapsed();--%>
    <%--<asp:ImageButton ID="imgcollapsed" Height="22px" Width="20px" ImageUrl="~/Images/Collapsed.png" runat="server"/>--%>
    </div>
    </div>
    </asp:Panel>
    <div style="overflow:;">
    <asp:Panel ID="pBodyBiolist" ScrollBars="None" runat="server" CssClass="accordionContent">
    <table style="width: 100%">
    <tr>
    <td>
    <div style="padding: 1px;">
    <ej:Grid ID="OHESELFDPersonBiographic" runat="server" DataSourceCachingMode="Session"
    OnServerRowSelected="OHESELFDPersonBiographic_ServerRowSelected" >
    <ClientSideEvents ToolbarClick="toolbarClick"/>
    <ScrollSettings Height="50%" />
    </ej:Grid>
    </div>
    </td>
    </tr>
    <%--<tr>
    <td>
    <asp:Label ID="lblresultsetcount" runat="server" ForeColor="Red"></asp:Label>
    </td>
    </tr>--%>
    </table>
    </asp:Panel>
    </div>
    <ajaxToolkit:CollapsiblePanelExtender ID="collapsepanelbiolist" runat="server"
    TargetControlID="pBodyBiolist" CollapseControlID="pHeaderBiolist"
    ExpandControlID="pHeaderBiolist" CollapsedText="Open" Collapsed="true"
    ExpandedText="Close" CollapsedSize="0" ImageControlID="imgcollapsibleinst"
    CollapsedImage="~/Images/Collapsed.png" ExpandedImage="~/Images/Expanded.png"></ajaxToolkit:CollapsiblePanelExtender>

    Please refer the above code.

    I have two panels and I am having an AJX collapsible extender to collapse the panel with id="pBodyBiolist". The extender creates an autogenerated div on run time with style overflow set to hidde. It prevents the page drop down list of the grid inside "pBodyBiolist" to be completely visible.

    On google chrome inspect,

    <div id class style="border: 0px; margin: 0px; padding: 0px; overflow-y: hidden; visibility: visible; height: auto;">

    <div id="Body_Body_pBodyBiolist" class="accordionContent" style="visibility: visible; height: auto;">

    The highlighted div is created by the collapsible extender. When I change the overflow style to visible in the debugger, the page dropdown overflows the panel and is working fine. The problem is how to fix it in the code. 

    Please let me know of a way to get rid of the extra div tag with overflow:hidden or a way to override it.

    I came across a similar post which was posted on 2010. I could not reply to it since its locked. Their solution to override this overflow:hidden with a overflow:visble in its container div did not work. Kindly somebody provide a solution.

    Thanks, Sharmila.

    Monday, March 11, 2019 7:51 PM

All replies

  • User839733648 posted

    Hi sharmi2388,

    According to your description and code, I suggst that you could use .parent() to find the parent div and set its style by jquery.

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $("#pBodyBiolist").parent().css("overflow", "visible");
            })
        </script>
    <div>
         <asp:Panel ID="pBodyBiolist" ScrollBars="None" runat="server" CssClass="accordionContent">
             <table style="width: 100%">
               ......
              </table>
         </asp:Panel>
    </div>

    result in console tab:

    Best Regards,

    Jenifer

    Tuesday, March 12, 2019 6:30 AM
  • User-1378710312 posted

    Thanks for the help.

    The above code works on page load. But when the page refreshes, the code does not apply anymore(the function is not called). Kindly let me know if you know a way to fix that.

    Thanks,

    Sharmila.

    Tuesday, March 12, 2019 9:02 PM
  • User839733648 posted

    Hi sharmi2388,

    I've tested the code again on my side and it works well after refreshing the page.

    I'd like to ask that if there are extra codes on your page. Maybe you have use Updatepanel and this may cause the issue.

    If possible, please share your testing code and this will be easier to help with you.

    Best Regards,

    Jenifer

    Wednesday, March 13, 2019 3:13 AM
  • User-1378710312 posted

    Yes, you are correct. I am using update panel. I have pasted my code below for your reference as you had asked.

    In my code, I am expanding the panel and loading the grid on "btnSearch" button click. So, the pagedropdown list which belongs to the grid is hidden again inside the panel on page refresh. I have attached a screenshot of my application page for your reference.

    <script type="text/javascript">

    $(document).ready(function(){
    $("#<%= pBodyBiolist.ClientID %>").parent().css("overflow", "visible");
    });

    </script>

        

    <asp:UpdatePanel runat="server"> <ContentTemplate> <div class="gray-container"> <asp:Panel ID="pHeaderSearch" runat="server" CssClass="accordionHeaderSelected"> <div class="studentheader_divs"> <div class="headerleft_div">Search</div> <div style="float: right; padding: 5px 2px;"> <asp:Image ID="imgCollapsiblesearch" Height="22px" Width="20px" ImageUrl="~/Images/Expanded.png" runat="server" /> </div> </div> </asp:Panel> <asp:Panel ID="pBodySearch" runat="server" CssClass="accordionContent"> <div class="biogrphic_div"> <table style="width: 98%; margin-left: 10px; margin-right: 10px;"> <tr> </tr> <tr> <td colspan="3" style="vertical-align:bottom;"> <div> <div style="float: left; width: 70%; vertical-align:bottom;"> <asp:Label ID="lblsearchmsg" runat="server" ForeColor="Red"></asp:Label> <asp:CustomValidator ID="AtLeastOneContact" runat="server" Display="Dynamic" OnServerValidate="AtLeastOneContact_ServerValidate" EnableClientScript="false" ForeColor="Red" /> </div> </div> </td> <td colspan="2"> <div> <div style="float: right;"> <asp:Button ID="btnSearch" runat="server" Text="Go" CssClass="buttoninst" OnClick="btnSearch_Click" /> <asp:Button ID="btnClear" runat="server" Text="Clear" CausesValidation="false" OnClick="btnClear_Click" /> </div> </div> </td> </tr> </table> </div> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="collapsepanelSearch" runat="server" TargetControlID="pBodySearch" CollapseControlID="pHeaderSearch" Collapsed="false" CollapsedText="Open" ExpandControlID="pHeaderSearch" ExpandedText="Close" CollapsedSize="0" ImageControlID="imgCollapsiblesearch" CollapsedImage="~/Images/Collapsed.png" ExpandedImage="~/Images/Expanded.png"> </ajaxToolkit:CollapsiblePanelExtender> <asp:Panel ID="pHeaderBiolist" runat="server" CssClass="accordionHeaderSelected"> <div class="studentheader_divs"> <div class="headerleft_div">Search Results</div> <div style="float: right; padding: 5px 2px;"> <asp:ImageButton ID="imgcollapsibleinst" Height="22px" Width="20px" ImageUrl="~/Images/Expanded.png" runat="server" /> </div> </div> </asp:Panel> <div style="overflow:;"> <asp:Panel ID="pBodyBiolist" ScrollBars="None" runat="server" CssClass="accordionContent"> <table style="width: 100%"> <tr> <td> <div style="padding: 1px;"> <ej:Grid ID="OHESELFDPersonBiographic" runat="server" DataSourceCachingMode="Session" OnServerRowSelected="OHESELFDPersonBiographic_ServerRowSelected" > <ClientSideEvents ToolbarClick="toolbarClick" RowSelected="rowSelected" ActionComplete="complete" /> </ej:Grid> </div> </td> </tr> </table> </asp:Panel> </div> <ajaxToolkit:CollapsiblePanelExtender ID="collapsepanelbiolist" runat="server" TargetControlID="pBodyBiolist" CollapseControlID="pHeaderBiolist" ExpandControlID="pHeaderBiolist" CollapsedText="Open" Collapsed="true" ExpandedText="Close" CollapsedSize="0" ImageControlID="imgcollapsibleinst" CollapsedImage="~/Images/Collapsed.png" ExpandedImage="~/Images/Expanded.png"></ajaxToolkit:CollapsiblePanelExtender> </div> </ContentTemplate> </asp:UpdatePanel>




    Wednesday, March 13, 2019 9:09 PM
  • User839733648 posted

    Hi sharmi2388,

    I suggest that you could use ScriptManager. RegisterStartupScript() method and set the css in it.

    And you have to add setTimeout() function to make the css setting work well.

    Here is my testing code.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <script>
            $(function () {            
                $("#pBodyBiolist").parent().css("overflow-y", "visible");           
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <div class="gray-container">
                        <asp:Panel ID="pHeaderSearch" runat="server" CssClass="accordionHeaderSelected">
                            <div class="studentheader_divs">
                                <div class="headerleft_div">Search</div>
                                <div style="float: right; padding: 5px 2px;">
                                    <asp:Image ID="imgCollapsiblesearch" Height="22px" Width="20px" ImageUrl="Image/test.jpg"
                                        runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pBodySearch" runat="server" CssClass="accordionContent">
                            <div class="biogrphic_div">
                                <table style="width: 98%; margin-left: 10px; margin-right: 10px;">
                                    <tr>
                                        <td style="vertical-align: bottom;">
                                            <div>
                                                <div style="float: left; width: 70%; vertical-align: bottom;">
                                                    <asp:Label ID="lblsearchmsg" runat="server" ForeColor="Red"></asp:Label>
    
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <div style="float: right;">
                                                    <asp:Button ID="btnSearch" runat="server" Text="Go" CssClass="buttoninst" OnClick="btnSearch_Click" />
                                                    <asp:Button ID="btnClear" runat="server" Text="Clear" CausesValidation="false" OnClick="btnClear_Click" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </asp:Panel>
                        <ajaxToolkit:CollapsiblePanelExtender ID="collapsepanelSearch"
                            runat="server" TargetControlID="pBodySearch" CollapseControlID="pHeaderSearch"
                            Collapsed="false" CollapsedText="Open" ExpandControlID="pHeaderSearch"
                            ExpandedText="Close" CollapsedSize="0" ImageControlID="imgCollapsiblesearch"
                            CollapsedImage="Image/test6.jpg" ExpandedImage="Image/test.jpg"></ajaxToolkit:CollapsiblePanelExtender>
                        <asp:Panel ID="pHeaderBiolist" runat="server" CssClass="accordionHeaderSelected">
    
                            <div class="studentheader_divs">
                                <div class="headerleft_div">Search Results</div>
    
                                <div style="float: right; padding: 5px 2px;">
    
                                    <asp:ImageButton ID="imgcollapsibleinst" Height="22px" Width="20px" ImageUrl="Image/test.jpg" runat="server" OnClick="imgcollapsibleinst_Click" />
    
                                </div>
                            </div>
                        </asp:Panel>
                        <div>
                            <asp:Panel ID="pBodyBiolist" ScrollBars="None" runat="server" CssClass="accordionContent">
                                <table style="width: 100%">
                                    <tr>
                                        <td>
                                            <div style="padding: 1px;">
                                                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                                                    <Columns>
                                                        <asp:BoundField DataField="Eid" HeaderText="Eid" SortExpression="Eid" />
                                                        <asp:BoundField DataField="Ename" HeaderText="Ename" SortExpression="Ename" />
                                                        <asp:BoundField DataField="age" HeaderText="age" SortExpression="age" />
                                                        <asp:BoundField DataField="sex" HeaderText="sex" SortExpression="sex" />
                                                    </Columns>
                                                </asp:GridView>
                                                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_info]"></asp:SqlDataSource>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>
                        </div>
                        <ajaxToolkit:CollapsiblePanelExtender ID="collapsepanelbiolist" runat="server"
                            TargetControlID="pBodyBiolist" CollapseControlID="pHeaderBiolist"
                            ExpandControlID="pHeaderBiolist" CollapsedText="Open" Collapsed="true"
                            ExpandedText="Close" CollapsedSize="0" ImageControlID="imgcollapsibleinst"
                            CollapsedImage="Image/test6.jpg" ExpandedImage="Image/test.jpg"></ajaxToolkit:CollapsiblePanelExtender>
    
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </form>
    </body>
    </html>
    

    code-behind

            protected void imgcollapsibleinst_Click(object sender, ImageClickEventArgs e)
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "callme", "setTimeout(function(){$('#pBodyBiolist').parent().css('overflow-y', 'visible');},0)", true);          
            }

    result:

    Best Regards,

    Jenifer

    Thursday, March 14, 2019 7:14 AM
  • User-1378710312 posted

    Hi Jenifer,

    Thanks for the response. I have kept the issue in the backlog and started working on the next sprint :). I have implemented the solution you had given me using script manager but it did not work. I am not sure what I am doing wrong. But I will revisit this issue later and update the forum.

    Thanks again for helping me with this issue.

    Thanks,

    Sharmila.

    Thursday, March 14, 2019 8:47 PM
  • User839733648 posted

    Hi sharmi2388,

    Have you checked that if there is any error message or information in the console tab using F12 developer tools?

    Best Regards,

    Jenifer

    Friday, March 15, 2019 1:49 AM