Mastering the art of horizontal scrolling within an angular material layout=row

Question

Mastering the art of horizontal scrolling within an angular material layout=row

I am attempting to create a slider using only a horizontal scrollbar with cards inside. In order to do this, I am trying to scroll the layout="row" within an ng-repeat.

Check out my codepen here

<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 can't figure out what's going wrong with it.

Thank you!

angularjs layout scroll flexbox angular-material

Answer 1

Answer №1

To ensure scrolling functionality, make sure to set a minimum width for your cards.

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

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

Check out the updated code on CodePen:

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

Answer 2

To ensure scrolling functionality, make sure to set a minimum width for your cards.

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

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

Check out the updated code on CodePen:

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

Answer 3

Answer №2

Creating a horizontal scroll effect requires the content width of an element to be larger than its actual width. To achieve this, you must determine a specific number to set as the content's width. (I opted for 300vw)

Here is an 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>

It's important to note that using flex="33" will attempt to distribute 3 elements across the parent's width equally at 33% each. However, if there are more than 3 elements, they will fill the width evenly. Therefore, simply using the flex directive will yield the same outcome.

Answer 4

Creating a horizontal scroll effect requires the content width of an element to be larger than its actual width. To achieve this, you must determine a specific number to set as the content's width. (I opted for 300vw)

Here is an 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>

It's important to note that using flex="33" will attempt to distribute 3 elements across the parent's width equally at 33% each. However, if there are more than 3 elements, they will fill the width evenly. Therefore, simply using the flex directive will yield the same outcome.

Mastering the art of horizontal scrolling within an angular material layout=row

Answer №1

Answer №2

Similar questions

It’s not possible for Typescript to reach an exported function in a different module

What is the process for retrieving user information following REST authentication on the client side?

NG-model not visible to AngularJS Controller's filter

Combining multiple requestBody in an AngularJS http.put request

Angular animations: triggered by user interaction

What is the best way to refresh an Angular model containing nested data?

How can I pass a parameter to my MEAN application using a clean and readable URL

What is the best method to retrieve a JSON record by its specific ID using Angular's AJAX functionalities?

Issues with nested array filtering in JS/Angular causing unexpected outcomes

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

Retrieve data from Last.fm API by utilizing both Node.js and Angular framework

Modifying the dimensions of mat-card in Angular Material

Pull information from API and populate a dropdown menu in an Angular material select input

Issue with Cordova contact plugin functionality

Tips for saving the status of an accordion controlled by an angular directive

Filtering input for multiple header columns in an Angular table

Having trouble locating the module recommendations on my Angular 1.6 app while using Browserify

Sending information to an Ionic popover within an ng-repeat loop

When the down key is pressed in a textarea, choose the list item

What is the process for uploading files using AngularFire on Firebase Storage?