I want to have 2 angular material cards next to each other but I don't know how.
HTML
<mat-card id="moth-card">
<mat-card-title>Live Stats</mat-card-title>
<app-card></app-card>
<app-card></app-card>
</mat-card>
At the moment the second one is under the first one.
Try below CSS:
display: inline-block;
HTML Code:
<mat-card id="moth-card">
<mat-card-title>Live Stats</mat-card-title>
<mat-card class="inline-block">
Part 1
</mat-card>
<mat-card class="inline-block">
Part 2
</mat-card>
</mat-card>
CSS:
.inline-block {
display: inline-block;
}
Working_Demo
Related
Hi,
I want to fit the elements of the first group (the numbers) to look like the second group(noche, mañana...). Change sizes according to the outer element.
I set both the group and individual element width to 100%
The numbers go all the way to 22 but they are cut off.
I used the answer in this question: Angular-material constant width of button group
The elements are there but they overflow, is there any way to distribute the available width between the 24 buttons without it overflowing?
Thanks in advance.
EDIT: Stackblitz
My HTML:
<div class="row">
<div class="col-12">
<label>Horas</label>
<div>
<mat-button-toggle-group [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{hour}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle *ngFor="let dMoment of dayMoments; let i = index" [value]="i">{{dMoment}}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
My scss:
.mat-button-toggle-group {
height: 20px;
font-size: 11px;
align-items: center;
width: 100%;
}
.mat-button-toggle {
width: 100%;
}
You can enclosed all under a class wrapper
<div class="wrapper">
<mat-button-toggle-group class="min-width" [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{
hour
}}</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle
*ngFor="let dMoment of dayMoments; let i = index"
[value]="i"
>{{ dMoment }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
Then, in styles.css remove the "padding" of the groups-buttons
.wrapper .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,
.wrapper .mat-button-toggle-label-content {
padding:0;
}
You can also add a min-width to the group
.wrapper .mat-button-toggle-group {
...
min-width:400px;
width:100%;
}
stackblitz
How to add menu at the top right of the card using angular material, as per the https://material.angular.io/components/card/overview document there is no tag for that.
I want to add a button with icon at the right top as shown in the picture
<mat-card class="custome-card">
<a [routerLink]="['/products/123']">
<img mat-card-image
src="https://wonderfulengineering.com/wp-content/uploads/2013/12/Lamborghini-wallpaper-14.jpg"
alt="Photo of a Shiba Inu">
</a>
<mat-card-content>
<a [routerLink]="['/products/123']" class="productDetail"><span
class="mat-subheading-2">Lamborghini Aventador</span></a><br>
<span>NRs 1 - 2 Crore</span><br>
<strong>Size: </strong> <span>XL L M S XS</span>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" fxLayoutAlign="center">
<falcon-button [field]="favoriteBtnConfig"></falcon-button>
<falcon-button [field]="shareBtnConfig"></falcon-button>
<falcon-button [field]="shopCartBtnConfig"></falcon-button>
</div>
</mat-card-actions>
</mat-card>
The above code create the image as below
This solve the issue
.mdl-card__menu {
position: absolute;
right: 16px;
top: 16px;
}
I'm trying to align my mat-icon on the right side of the same line where "Betrag" is:
I tried settingfloat: right and display: inline-block but they don't work together;
could someone help me?
here's the HTML
<mat-accordion>
<mat-expansion-panel hideToggle *ngFor="let key of itemCategories">
<mat-expansion-panel-header *ngIf="items[key].length > 0">
<mat-panel-title>
{{key}}
</mat-panel-title>
<mat-panel-description>
{{items[key].length}}
</mat-panel-description>
</mat-expansion-panel-header>
<div *ngFor="let item of items[key]" (click)="openDialog(item)">
<mat-divider></mat-divider>
<p>
Name: {{item?.name}}<br>
Betrag: {{item?.price}}
<button mat-icon-button (click)="downloadPdf()">
<mat-icon color="primary">arrow_circle_down</mat-icon>
</button>
</p>
</div>
</mat-expansion-panel>
</mat-accordion>
my scss:
mat-panel-description {
align-items: center;
justify-content: flex-end;
}
p{
cursor: pointer;
}
.mat-icon-button{
float: right;
clear: both
}
I don't understand why it's on the lower edge/next line, and is there a better way to do it than using the float property?
any help is appreciated!!
did you try to make the container flexbox ?
mat-expansion-panel > div{
display:flex;
}
.mat-icon-button{
justify-self: end;
}
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
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>