<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.