I am trying to make the cards inside of the mat-grid-tile to be more spaced out using a display: flex;
However, the cards are stuck together and have no space between them. What should I do to make them look more spaced out?
HTML
<mat-grid-tile [colspan]="3" [rowspan]="2" class="productTile">
<mat-card *ngFor="let product of products" class="productCard">
<mat-card-header>
<ngx-avatar mat-card-avatar class="my-avatar" value={{product.authorInitials}} *ngIf="product.authorProfile == ''" class="avatar-header" size="40"> </ngx-avatar>
<ngx-avatar mat-card-avatar class="my-avatar" src={{product.authorProfile}} *ngIf="product.authorProfile != ''" class="avatar-header" size="40"> </ngx-avatar>
<mat-card-title>{{product.title}}</mat-card-title>
<mat-card-subtitle>{{product.author}}</mat-card-subtitle>
<button mat-icon-button matTooltip="Edit Post"><mat-icon class="toggle-icon">edit</mat-icon></button>
<button mat-icon-button matTooltip="Delete Post" (click)="deletePost(product.postID)"><mat-icon class="toggle-icon">delete</mat-icon></button>
</mat-card-header>
<img mat-card-image [src]="product.imageLinks ? product.imageLinks[0] : null" alt="Photo" class="cardImage">
<mat-card-content>
<p>
{{product.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
SCSS
.productTile{
display: flex;
justify-content: space-around;
}
Please look at this answer :
How to set row spacing in Angular Material's Grid?
You can use property gutterSize
Related
Within an Angular project, I'm trying to replicate this.
I have a parent mat-card element which will house a mat-grid-list.
The mat-grid-list will then contain multiple (10) mat-cards which would in turn surround another mat-card (see the example image for the layout provided).
Is something like this possible and if so, what would the best approach be to do so?
Currently, with what I have, the child mat-cards (mat-card-2's in the example) are displaying in a single column.
HTML
The following is within a separate component which calls the "x" component
<mat-card-content *ngFor="let x of xs">
<div>
<app-x-synopsis [x]="x" ></app-x-synopsis>
</div>
</mat-card-content>
HTML for the "x" component
<mat-grid-list cols="6">
<mat-grid-tile id="table-grid" [colspan]="6" [rowspan]="1">
<mat-card class="x-synopsis-card">
<mat-card-header class="x-name">
<mat-card-title class="title">
{{ x.name }}
</mat-card-title>
<div style="flex-grow: 1"></div>
<button mat-icon-button>
<fa-icon [icon]="faInfoCircle"></fa-icon>
</button>
</mat-card-header>
<mat-card-content class="x-occupied" *ngIf="hasX()">
<div class="x-container" fxLayout="row wrap" fxLayoutAlign="space-around center">
<div class="ux-container" fxLayout="column">
<div class="ux-value">
{{ x.y.z }}
</div>
<div class="ux-title">
UX
</div>
</div>
<div class="abc">
{{ x.y.a }}
</div>
</div>
</mat-card-content>
<mat-card-content class="x-vacant" *ngIf="!x()">
<div class="x-container" fxLayout="row wrap" fxLayoutAlign="space-around center">
<div class="label">
VACANT
</div>
</div>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
Any help would be greatly appreciated, I am also happy to provide anymore information where possible :) Thanks.
sorry, I am new in CSS, I am trying to align button to right but not able to do it.
below is my code.
<mat-card-header>
<mat-card-title>
{{rosterDetails.dutyDate}} ({{rosterDetails.dutyTime}})
</mat-card-title>
<button mat-icon-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</button>
</mat-card-header>
I am using angular material.
<button class="d-flex ms-auto" mat-icon-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</button>
add this code in css file
mat-card-header {
display: flex;
justify-content: space-between;
}
I have the following bit of code. I want to make the text in the spans line up with the bottom of the stars.
<ng-container *ngIf="starCount">
<span>Not Relevant</span>
<button
mat-icon-button
color="primary"
*ngFor="let ratingId of ratingArr; index as i"
[id]="'star_' + i"
(click)="onClick(i + 1)">
<mat-icon>{{ rating > i ? 'star' : 'star_border' }}</mat-icon>
</button>
<span>Very Relevant</span>
</ng-container>
Tried all sorts of things out in the Chrome inspector, but have made no meaningful progress.
You can use something like that:
<div *ngIf="starCount" style="display: flex; align-items: center">
<span>Not Relevant</span>
<button
mat-icon-button
color="primary"
*ngFor="let ratingId of ratingArr; index as i"
[id]="'star_' + i"
(click)="onClick(i + 1)">
<mat-icon>{{ rating > i ? 'star' : 'star_border' }}</mat-icon>
</button>
<span>Very Relevant</span>
</div>
I am rendering a list of asdfasd in Angular, but the images I upload are of different sizes, which causes some asdfasd to be bigger than others. How to make them the same size?
Here is the HTML
<div class="cardList">
<ng-container *ngFor="let card of comics">
<mat-card class="example-card">
<mat-card-content>
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{card.name}}</mat-card-title>
</mat-card-header>
<img mat-card-image [src]="card.picture">
<mat-card-content>
<p>
{{card.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click) = "openDialog(card)">${{card.amount}}</button>
</mat-card-actions>
</mat-card-content>
</mat-card>
</ng-container>
</div>
<mat-divider></mat-divider>
Try with this
mat-card img{
object-fit: cover; /*this makes the image in src fit to the size specified below*/
width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
height: 80%;
}
Reference
I'm generating cards from an Api when user makes a search.
I have film list component in which I show my cards
here's the HTML
<div fxLayout='row' fxLayoutWrap class="cards">
<div fxFlex="20" class="example-card" *ngFor="let film of dataResult.results">
<mat-card>
<mat-card-header>
<mat-card-title>{{film.title}}</mat-card-title>
<mat-card-subtitle>{{film.release_date}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{film.overview}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
And CSS
.example-card {
min-width: 100%;
margin: 40px;
}
.cards {
width: 400px;
}
the services are working and also component ts logic.
My problem is that material cards are not wrapping to a new line while I'm using fxLayoutWrap to wrap content when fxFlex get 100 of value.
Here's a stacklitz demo ( I get an https error when I call the API, if someone could fix it I'll be grateful )
Here's a screenshot of my problem
<div fxLayout='row' fxLayoutWrap class="cards">
<div fxFlex="20" class="example-card">
<mat-card *ngFor="let film of dataResult.results" style="margin-top:10px;>
<mat-card-header>
<mat-card-title>{{film.title}}</mat-card-title>
<mat-card-subtitle>{{film.release_date}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{film.overview}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
Because there is no problem repeating the code, you must be sure to place the repeat command as well as the essence of the code in the smart design material, and the codes are merged in the absence of space, so they must be separated for them Write css style margin-top:10px.
Verify the code above for you.
the fxLayout attribute can take a second parameter "wrap" which will do what you're looking for.
<div fxLayout="row wrap"></div>