I'm currently developing an angular single page application (SPA) that needs to generate multiple searchable lists of data within separate tabs. I have structured them like this:
<body>
<tabset>
<tab>
<div class="listedData">
<ul>
<li class="searchBar"></li>
<li ng-repeat="iterateHere"></li>
</ul>
</div>
<div class="dataDetails">
</div>
</tab>
//... other tabs
</tabset>
</body>
The goal is for the page to take up the full height of the screen, and since the data list will likely exceed that height, I want to implement a scroll bar solely inside the <ul> (excluding the first element - searchBar). Although it's not ideal, I can work with including the search bar in the scrollable area.
To achieve this, I've set up my CSS as follows:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.listedData {
ul {
width: 15%;
float: left;
max-height: 95%;
overflow-y: auto;
}
}
However, the outcome isn't what I expected - the list simply extends off the screen to accommodate all elements, and I can scroll the entire page to view them. I attempted setting the height property for all tags in the hierarchy (<tabset>, <tab>, and <div>), but saw no change. Is there a way to achieve my desired layout using only CSS, or am I required to utilize JavaScript?