How to scroll horizontally inside layout=row in angular material

Question

i'm trying to make a slider with just horizontal scrollbar with cards in that, so to achieve that i'm trying to scroll the layout="row" inside with ng-repeat inside

https://codepen.io/williamscott701/pen/GmLada

<body ng-app="myApp" ng-cloak ng-controller="ProductController">
  <md-content class=" md-padding " layout="column ">
    <div layout="row">
      <div flex="33" ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] ">
        <md-card>[ flex = 33 ]
        <md-card>
      </div>
    </div>    
  </md-content>
</body>

i dont know where it's going wrong

Thanks

Vibhanshu · Accepted Answer · 2017-05-27 08:17:12Z

7

For scrolling to work you need to provide a min-width to your cards.

md-card {
  min-width: 200px;
}

div[layout="row"] {
  overflow: auto;
}

here is the link to updated codepen

https://codepen.io/vibhanshu/pen/YVMbob?editors=1100

answered May 27, 2017 at 8:17

Vibhanshu

5423 silver badges14 bronze badges

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

Comments

Omri Luzon · Accepted Answer · 2017-05-27 08:15:05Z

2

For a horizontal scroll you need that the content's width of an element will be greater than it's width, and for that you need to decide on a number to be the content's width. (I chose 300vw)

For example:

<body ng-app="myApp" ng-cloak ng-controller="ProductController">
  <md-content class=" md-padding " layout="column ">
    <div layout="row" style="width: 300vw;">
      <div flex ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] ">
        <md-card>[ flex = 33 ]
          <md-card>
      </div>
    </div>
  </md-content>
</body>

Also note that flex="33" will try to place 3 elements all with 33% of the parent's width, but because it has more than 3 they will just make them fill the width evenly, so just a flex directive will give you the same result.

edited May 27, 2017 at 8:15

answered May 27, 2017 at 8:09

Omri Luzon

4,2826 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to scroll horizontally inside layout=row in angular material

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related