How to avoid Horizontal scroll bar while using FlexLayoutModule in angular

Question

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-property-feed',
  templateUrl: './property-feed.component.html',
  styleUrls: ['./property-feed.component.scss']
})
export class PropertyFeedComponent implements OnInit {

  property =[1,2,3,4,5,6,7,8,9,10];
  
 
  constructor() { }

  ngOnInit() {
  }

}

button {
  margin: 5px 5px 5px 5px;
}
.feed-title {
  font-size: 30px;
  font-family: "Girassol", cursive;
}

.property-feed {
  width: 300px;
  height: 410px;

}
.row-class{
  overflow:;
}

<div class="row-class" fxLayout="row" >
    <ng-container *ngFor="let ppty of property">
        <div fxFlex>
            <mat-card class="property-feed">

                <mat-card-header>
                    <div mat-card-avatar class="avatarImage"></div>
                    <mat-card-title>Card Title</mat-card-title>
                    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <app-gallery></app-gallery>
                    <h3>some informaion to the end user</h3>
                </mat-card-content>
                <mat-card-footer>

                </mat-card-footer>
                <mat-card-actions>
                    <button matTooltip="If intrested contact seller" mat-fab large color="primary">
                        <mat-icon>thumb_up_alt</mat-icon>
                    </button>


                    <button matTooltip="If intrested add to wishlist" mat-fab large color="warn">
                        <mat-icon>add_shopping_cart</mat-icon>
                    </button>
                    <button matTooltip="View details" mat-fab large color="warn">
                        <mat-icon>unfold_more</mat-icon>
                    </button>
                </mat-card-actions>
            </mat-card>
        </div>

    </ng-container>

</div>

I am new to flexlayoutmodule in angular,I was trying to loop some card contents like products in a e-cart website. but when more than 3 cards a horizontal scroll bar is coming, My requirement is ,it should display cards in each row, once its filled a row it should be moved to another row.

Thanks in advance :)

vishnu sandhireddy · Accepted Answer · 2020-04-27 16:57:19Z

1

The css flex row won't wrap the components, you might need to use wrap along with row. https://github.com/angular/flex-layout/wiki/fxLayout-API

<div fxLayout="row wrap">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

answered Apr 27, 2020 at 16:57

vishnu sandhireddy

1,1761 gold badge7 silver badges15 bronze badges

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

2 Comments

Vaisakh MA Over a year ago

You are a life saver !! Would you mind to share any links that helps to understand better this flexlayout, Since I was using bootstrap for past few months, Getting stuck with small things like this while using Flex.

vishnu sandhireddy Over a year ago

This site is good to understand flex. flexboxfroggy.com

Collectives™ on Stack Overflow

How to avoid Horizontal scroll bar while using FlexLayoutModule in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related