2

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

2 Answers 2

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

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

Comments

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.