Kimbi Kimbi - 1 month ago 9
AngularJS Question

Overflow-y doesn't work with ng-repeat

According to this Link, div needs to be set to a fixed height, but it doesn't work here with this following code.

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


Tried to do this,

<div style="height:200px;overflow-y:auto;">
<div style="min-height:200px">
<div ng-repeat="site in sites">
</div>
</div>
</div>


and a few other ways, really don't understand why it the div doesn't contain the ng-repeat elements.

Please if anyone can explain why?

Image

This is where scroll should be, on the red border. "Queentown" is hidden below the parent div, underneath the red border. Hello NZ

UPDATE

Actually any of the answers below were correct, while it couldn't be used in my code was this culprit . A scroll class was enable, and by , it turned off the scroll and now any of the answers cause be use.

By the way, thank you for your time and effect. Appreciate it.

Answer

Plunker

<button ng-if="!(site.Initial===flash_site)" class="button button-block" ng-style="{'background-color': site.Color}" ng-click="site_selected(site)">

ng-click="site_selected({{site}}) -- you don't need {{}} here.

style="background-color:#{{site.Color}};" -- you don't need {{}} here as well.

change style to ng-styleto dynamically render color.

If you want to user color codes then concat # with color

ng-style="{'background-color': '#'+site.Color}"
Comments