How to add scrollbar using angularJs ng-repeat?

Question

I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?

main.html

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading clearfix">
                <h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
            </div>
            <div class="panel-body">
                <ul>
                    <li class="slide" ng-repeat="test in tests">
                        <div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
                            <span>{{test}}</span>
                        </div>
                    </li>   
                </ul>
            </div>
      </div>    
    </div>
</div>

what you think i should add helper class to achieve this task because we have panel body across application that will be impacted ? — hussain
– hussain, Commented May 16, 2016 at 15:06
Depends on what you want to achieve, but yeah, IMO it would be better to add extra class, than to overwrite the standard one. — Georgy
– Georgy, Commented May 16, 2016 at 15:09

user3601578 · Accepted Answer · 2016-05-16 15:02:11Z

13

I think this an HTML problem. Try to add this CSS to your code:

.panel-body {
    overflow: scroll;
    height: 100px;
}

overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.

answered May 16, 2016 at 15:02

user3601578

1,3722 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chihuahua Enthusiast · Accepted Answer · 2016-05-16 15:10:40Z

I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.

<style>
    .conditionalScroll{
        width: 100%;
        height: 225px; /*change to your liking*/
        overflow: scroll;
    }
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading clearfix">
                    <h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <li class="slide" ng-repeat="test in tests">
                            <div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
                                <span>{{test}}</span>
                            </div>
                        </li>   
                    </ul>
                </div>
          </div>    
        </div>
    </div>
</div>

Christopher Jenks · Accepted Answer · 2016-05-16 15:16:42Z

I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:

CSS

.panel-body {max-height:400px;overflow:scroll;}

or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading clearfix">
                <h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
            </div>
            <div class="panel-body panel-scroll">
                    <ul>
                        <li class="slide" ng-repeat="test in tests">
                            <div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
                                <span>{{test}}</span>
                            </div>
                        </li>   
                    </ul>
            </div>
      </div>    
    </div>
 </div>

CSS

.panel-scroll {max-height:400px;overflow:scroll;}

Collectives™ on Stack Overflow

How to add scrollbar using angularJs ng-repeat?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related