How can a scrollbar be triggered /using overflow property in an angular app (by ng-repeating through elements)?

Question

I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).

I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html? Thanks!! Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.

<li>
  <a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
   <div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">

    <div class="sidebarBox">
        <h2 class="sideBarHeader">Cart </h2>

        <div class="sidebarContainer" ng-repeat="item in cart">
            <img src="{{item.imageUrl}}" style="width:90px;height:100px;">

            <div class="sidebarContent">
                <p class="sidebarTitle">{{item.title}} </p>
                <p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
                <p class="sidebarSubtitle">Price: ${{item.price}}</p>
            </div>
            <p class="sidebarLine"></p>
        </div>

    </div>
    <br>
    <div class="sidebarNoScroll">
        <p style="color:black;font-size:22px;">Total</p>
        <p class="sidebarTotal">${{ total() }}</p>
        <button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
        <button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
     </div>

  </div>
</li>

css.

.sidebarContainer {
    overflow:scroll;
    height:224px;
 }
.sidebarNoScroll {
     overflow: hidden;
 }

Ced · Accepted Answer · 2017-01-05 02:02:35Z

1

Wrap the container.

<div class="sidebarContainer">
        <div ng-repeat="item in cart">

        </div>
</div>

answered Jan 5, 2017 at 2:02

Ced

17.7k16 gold badges103 silver badges160 bronze badges

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

Collectives™ on Stack Overflow

How can a scrollbar be triggered /using overflow property in an angular app (by ng-repeating through elements)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related