As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below.
<div style="margin-top:0.5vh;">
<div style="height:200px;border:1px solid red;overflow:auto;" ng-init = "home_init()">
<ol>
<li ng-repeat= "site in sites">
<button ng-if="!(site.Initial===flash_site)" class="button button-block" style="background-color:#{{site.Color}};" ng-click="site_selected({{site}})">
<b>{{site.Name}}</b>
</button>
<button ng-if="(site.Initial===flash_site)" class="button button-block" style="background-color:#FFFFFF;">
<b>{{site.Name}}</b>
</button>
</li>
</ol>
</div>
</div>
I attempted to do the following,
<div style="height:200px;overflow-y:auto;">
<div style="min-height:200px">
<div ng-repeat="site in sites">
</div>
</div>
</div>
and tried a few other approaches, but I am puzzled as to why the div does not contain the elements generated by ng-repeat.
If anyone could shed light on this issue, I would greatly appreciate it.
Image
The scroll should be visible on the red border. The text "Queentown" is currently hidden underneath the parent div, below the red border. https://i.sstatic.net/CauoC.png
UPDATE
In fact, none of the solutions mentioned previously worked for me. The culprit turned out to be a scroll class that was enabled and causing the scroll to be disabled. Now, none of the solutions provided can be utilized successfully in my code.
Thank you for taking the time and effort to assist. Your support is greatly appreciated.