Hi, I'm currently using an ej2 syncfusion TreeView control to do some nested api listing on a page. It works well, but the issue I'm having with it that I can't seem to find a work around for is the scrollbar that seems to be part of the TreeView itself, the horizontal scrollbar. I can't seem to be able to force the scrollbar to the bottom of the page and have it stay there. The containing div height is 100% and takes up the full space available to it, but when expanding the treeview, the scroll bar always appears like this:
I have tried multiple approaches with css to force it down and moved it into a new div with flex properties but the best that I seem to be able to do is set the height of the e-list-parent class to 100% but that creates other problems with multiple scrollbars and layout breakage.
Currently the html is and css are not very complex neither is the javascript, and the javascript doesn't perform any styling manipulation on the page currently. Is this possible to do? Is there a specific rule, or element thats needed to accomplish getting the treeview's horizontal scrollbar to stick to the bottom of the containing div? It seems to be part of the e-list-parent e-ul element but applying any css changes to this gives unwanted result
<style>
#api-container {
width: 20%;
height: 100%;
overflow-y: auto;
}
#treeview-container {
flex: 1 1 auto; /* Grow to fill remaining space */
overflow: auto; /* Optional: scroll if content overflows */
}
#schema-header {
background-color: #f0f0f0;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #ccc;
position: sticky;
top: 0;
z-index: 10;
}
</style>
<main id="api-explorer">
<div class="flexing-container" id="operations-container">
<div id="horizontal-splitter" class="no-border-splitter">
<div id="api-container">
<div id="schema-header">
API's
</div>
<div id="treeview-container">
</div>
</div>
<div id="sql-results-container">
<div id="vertical-splitter" class="no-border-splitter">
<div style='display: flex; flex-direction: column;'>
<div id="request-container" class="content">
</div>
</div>
<div id="element">
<div style="display: none;" id="loadingDiv"><div class="explorer-loader"></div></div>
<div id="overlay">
</div>
<div class="e-tab-header">
<div>Results</div>
<div>JSON</div>
<div>Messages</div>
</div>
<div class="e-content">
<div>
<div id="results-container" class="content"></div>
</div>
<div>
<div>
<div id="json-container" class="content">
<div id="json-display-editor" style="height: 100%; width: 100%;"></div>
</div>
</div>
</div>
<div>
<div id="messages-container" class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
