Within my datagrid, there exists an expandable/collapsible section above the content (see Picture 1 https://i.sstatic.net/N68Rl.png). Upon expanding the content, a scroll bar appears within the datagrid element to display the data (see Picture 2 https://i.sstatic.net/QxVfI.png).
To potentially resolve this issue, is it feasible to dynamically update the maximum height by adding the current height with an additional 30px? If so, how can this be achieved?
.panelGrid {
background-color: white;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
Below is the relevant code snippet:
<asp:Panel Style="font-size: 14px;" Visible='<%# Eval("Description").ToString() == "Discharges" %>' runat="server">
<label class="collapsible" style="font-size: 10px;">Check List</label>
<div class="content text-left">
<ul>
<li><a href="../Iframes/IFDC.aspx" target="_blank" runat="server" onclick="window.open('../Iframes/IFDC.aspx', 'InstitutionalFUllCheckListWindow','width=1680,height=1300, scrollbars=1,resizable=1'); return false;">Institutional – Pre Settlement Checklist</a></li>
<li><a href="../Iframes/DMARDFC.aspx" target="_blank" runat="server" onclick="window.open('../Iframes/DMARDFC.aspx', 'DischargeMortgageCheckListWindow', 'width=1680,height=1300, scrollbars=1,resizable=1'); return false;">Institutional – Post Settlement Checklist</a></li>
<li><a href="../Iframes/FFDC.aspx" target="_blank" runat="server" onclick="window.open('../Iframes/FFDC.aspx', 'FundFUllCheckListWindow', 'width=1680,height=1300, scrollbars=1,resizable=1'); return false;">Private– Pre Settlement Checklist</a></li>
<li><a href="../Iframes/PDC.aspx" target="_blank" runat="server" onclick="window.open('../Iframes/PDC.aspx', 'PartialDischargeCheckListWindow', 'width=1680,height=1300, scrollbars=1,resizable=1'); return false;">Partial – Pre Settlement Checklist</a></li>
</ul>
</div>
</asp:Panel>