i am using flex layout module in angular 4, i trying card layout in desktop mode side by side need to show and the same when mobile mode it should be one below one, but its not working for me plz suggest proper code.
below is my code:
<div fxLayout="row" fxLayout-gt-xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #1</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #2</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
using this version: #angular/flex-layout: ^2.0.0-beta.9
By default, block elements are placed in different rows. You just need to handle the orientation for xs screens.
Use this:-
<div fxLayout.xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #1</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
<h2>Card title #2</h2>
<mat-card-content>
<p>Some content</p>
</mat-card-content>
</mat-card>
</div>
Related
I've Angular v13 application with #angular/flex-layout also v13. The issue is Flex layout of type row wrap with Grid alignment is not working as expected. Below is the html code block. The application is hosted in stackblitz. If I remove the grid from fxLayoutGap, the layout is getting rendered without gutter space for second/subsequent rows.
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</ng-container>
</div>
</div>
How to configure #angular/flex-layout row wrap with grid?
EDIT
Here is the solution, updated code can be accessed at stackblitz. Basically we need to wrap a div around mat-card and add fxFlex with percentage. In my case I had set it to 25 so that 4 cards come in first raw.
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<div fxFlex="25">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</div>
</ng-container>
</div>
</div>
I'm trying to do some vertical aligning in Bootstrap and can't seem to achieve it with the various flex box classes (align-items-center etc).
I need the text content in the boxes of the below codepen to be vertically centered ... whilst also each box should match the height of the tallest box (as is currently working)... can anyone help?!
The inner divs need to be wrapped in a link - don't know if thats affecting things?
https://codepen.io/jwacreative/pen/VwjePEj
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:red">
<h2>Title</h2>
<p>Some text</p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:green">
<h2>Title</h2>
<p>Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text<< /p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="summary-box h-100" style="background:blue">
<h2>Title</h2>
<p>Some text</p>
</div>
</div>
</div>
CSS Grid should be able to help with this...
.summary-box {
display: grid;
align-content: center;
}
We are currently using Angular as a front-end with fx-layout api for responsiveness.
When we are using the fxLayout="column" all elements are collapsed and doesn't seem to have any height.
What are the best practice when using fx-layout/flex to handle these scenarios ?
Using angular 9.0.0rc with flex-layout": "^8.0.0-beta.27
Browserslist setting
0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11
Here an image from IOS Safari (12)
Here an image from chrome
Here the repeated container which display the list seen in the image above
<div *ngIf="!(dataSource.loading$ | async)">
<mat-card class="pointer mb-2" *ngFor="let quotation of dataSource.quotations$ | async"
(click)="onClickRow(quotation)">
<mat-card-content fxLayout="row" fxLayoutGap.gt-xs="15px" fxLayout.xs="column" fxLayoutAlign="start center"
fxLayoutAlign.xs="center center">
<div fxLayout="column" fxLayoutAlign="center center">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && quotation.customer.photoUrl"
[src]="quotation.customer.photoUrl" alt="">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasCustomerRights && quotation.salesRep.photoUrl"
[src]="quotation.salesRep.photoUrl" alt="">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && !quotation.customer.photoUrl"
src="https://storage.googleapis.com/edcommerce/businesslogic/images/placeholder/avatar.jpg" alt="">
</div>
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
<div fxLayout="row" *ngIf="authSvc.currentUser.hasSalesRights">
<span class="mat-body">{{quotation.createdDate | edDate}}</span>
</div>
<div fxLayout="row" fxLayoutAlign.xs="center center">
<span class="mat-h2 m-0">{{quotUtils.getVehicleDescription(quotation)}}</span>
</div>
<div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasSalesRights"
fxLayoutAlign="start center">
<span class="mat-body">{{ts('common.user.text.roles.customer')}}</span>
<span class="mat-body">{{quotation.customer.fullName}}</span>
</div>
<div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasBuyerRights"
fxLayoutAlign="start center">
<span class="mat-body">{{ts('common.user.text.roles.sales_rep')}}</span>
<span class="mat-body">{{quotation.salesRep.fullName}}</span>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="10px" fxLayoutAlign="start center">
<span class="mat-body">{{ts('page.quotations.text.step_required')}}</span>
<span
class="mat-body-2 color-primary">{{enumUtils.Quotation.getStatusDescByRole(quotation.status,statusTypes)}}</span>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
The problem with safari occur on this element (second container in the mat-card-content):
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
The flex on safari resulted with a weird exponential number in the CSS something like this : flex: 1 1 1.12e-16
Changing fxFlex for fxFlex="grow" generated on safari this css flex : 1 1 100% which fix the height !
I'm using flex layout to set material card inline on desktop view and vertically on phone view .
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" class="containercards">
<div fxFlex fxFlex.xs="100">
<mat-card class="container">
<mat-card-title>
Jeu Puissance 4 </mat-card-title>
<img mat-card-image src="../../assets/icons/puissance4.png">
<mat-card-content>
<p> Javascript, HTML/CSS </p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="Puissance4Href()">Github</button>
<button mat-raised-button color="primary" (click)="openDialog('Puissance4')">Détails</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex fxFlex.xs="100">
<mat-card class="container">
<mat-card-title>
Post-it </mat-card-title>
<img mat-card-image src="../../assets/icons/post-it.png">
<mat-card-content>
<p>Silex(PHP), HTML/CSS, AJAX </p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="PostitHref()">Github</button>
<button mat-raised-button color="primary" (click)="openDialog('Postit')">Détails</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex fxFlex.xs="100">
<mat-card class="container">
<mat-card-title>
Gestionnaire de tâches </mat-card-title>
<img mat-card-image src="../../assets/icons/planning.png">
<mat-card-content>
<p>Angular 4 , NodeJS , ExpressJS, Angular Material Components</p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="PlannerHref()">Github</button>
<button mat-raised-button color="primary" (click)="openDialog('Gestionnaire')">Détails</button>
</mat-card-actions>
</mat-card>
</div>
</div>
The problem is that in phone view, I don't get cards with the same width size even if I set fxLayout.xs to 100.
Here's a stackblitz example.
Here I get the first and second with a smaller width, in my app only the first card have a smaller width.
Here's what I get in local
Your stackblitz doesn't include flex-layout as a dependency (and of course doesn't import FlexLayoutModule). When you include it, the flex layout code you've added will be applied and your problem will show.
You are trying to set the width of all your cards using width="70%" applied to <mat-card> but flex layout is adjusting the size of the parent <div>. And because your fxLayoutAlign setting is "center center", flex layout adjusts the widths of the divs for the row layout but not for the column layout. So the cards are actually 70%, but the divs are not. You need to apply a specific width to the divs for xs layouts. You might find that adding the xs specific layout alignment fxLayoutAlign.xs="start stretch" is all you need to do or at least a starting point. This will make all the divs full width, leaving all the cards at a consistent 70%.
Using bootstrap, the content within the rows is breaking out into the ones above and below. How can I secure the content so that the styling rules apply as they should?
HTML
<div class="row home">
<div class="hero-unit">
<div class="container">
<div class="container hero-header">
<h2>Good lorem catchphrase, here</h2>
<p>This text should sit under the header above, but in mobile, it and the header and buttons within this row should be centered. </p>
<button type="button" class="btn btn-ghost pull-left">contact us</button>
<button type="button" class="btn btn-ghost call-us">call us 24/7 <i class="fa fa-phone"></i></button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="row hero-family">
<div class="col-sm-12 col-md-6 col-lg-12">
<div class="container blurb">
<h1 class="header">All for the family</h1>
<p>This is just more filler text for this space in place of what will eventually go here. This should be centered above the people and button below, while the content above should not flow into this space when downsizing.The image below should maintain
its position at the bottom of the row and not come up when resizing either.</button>
</div>
</div>
</div>
<div class="row hero-family">
<div class="family-image"></div>
</div>
<div class="row we-can-help">
<div class="container">
<h1>We are here</h1>
<p>This content shouldn't break out of its row either, but still manages to. Not a good thing!</p>
</div>
</div>
JSFIDDLE: LINK
This is how it should look
Below 992px, it then starts looking like this:
Notice the image comes away from the bottom of its row and the collision of content between rows.