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;
}
Related
For some reason when I added the third button, the buttons started showing in a column manner.
html:
<div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
<div *ngIf="isChannelEditable">
<button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
<div *ngIf="isChannelReadyForBids">
<button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for
bidding
</button>
</div>
<button mat-raised-button color="accent" type="submit">Save Channel</button>
</div>
<div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
<button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
</div>
</div>
css:
.creator-button-container{
background-color: red;
display: inline-block;
flex-direction: row;
}
I though the 'display: inline-block' would work but its not working
I looked at this solution but i didnt understand it: Angular - display buttons in rows of two
its weird because as soon as i added the third button, the buttons started being displayed as a column
Add buttons in div tag because div is block level element.
Something like this:
<div>
<div><button class="btn">B1</button></div>
<div><button class="btn">B2</button></div>
<div><button class="btn">B3</button></div>
</div>
I've a button inside the notification and I'm trying to place the button on the right side like the design below but not sure how to place it without doing style="left: 290px" because it will look weird when the page is open in different screen size.
Any help or suggestion will be really appreciated.
<div>
<div class="notification"
[ngClass]="{'noty-error' : (noty.notificationType==1),'noty-warn': (noty.notificationType==2), 'noty-info' : (noty.notificationType==3)}"
*ngFor="let noty of notifications;">
<mat-icon *ngIf="noty.notificationType==1" class="noty-error-icon">highlight_off</mat-icon>
<mat-icon *ngIf="noty.notificationType==2" class="noty-warn-icon">error</mat-icon>
<mat-icon *ngIf="noty.notificationType==3" class="noty-info-icon">warning</mat-icon>
<span style="color: black;">
{{noty.message}}
</span>
<ng-container *ngIf="noty.notificationType==2">
<button mat-raised-button color="accent" [style.marginRight.px]="20" style = "display: flex; justify-content:flex-end" matTooltip="Save Text Edit" (click)=openDialog()>
View
</button>
</ng-container>
</div>
</div>
This is what I've so far
and this is the design I'm trying to do
This might work
.notification {
display:flex;
position:relative;
width:100%;
}
button{
position:absolute;
right:20px;
}
I have a problem with the mat-menu, I have looked all over the place but nothing is working. I'm trying to add a margin-top but this one is never supported.
navbar-no-mobile.component.html
<div class="pull-right">
<button class="btn-language" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon [ngClass]="{'flag-francais': isFrench, 'flag-english': !isFrench}"></mat-icon>
<a lang="{{language}}">{{language}}
<fa-icon class="chevron_white" aria-hidden="true" [icon]="faChevronDown"></fa-icon>
</a>
</button>
<mat-menu class="flag-menu" #menu="matMenu">
<button mat-menu-item (click)="switchToEnglish()">
<mat-icon class="flag-english"></mat-icon>
<span lang="english">English</span>
</button>
<button mat-menu-item (click)="switchToFrench()">
<mat-icon class="flag-francais"></mat-icon>
<span lang="français">Français</span>
</button>
</mat-menu>
</div>
navbar-no-mobile.component.scss
/deep/ .cdk-overlay-container .flag-menu {
margin-top: 4em;
}
I have also tried placing the css in the overall css (styles.scss) and inverting .flag-menu with .cdk-overlay-container or use ::ng-deep instead of /deep/ but it also doesn't work.
This work for me:
::ng-deep .cdk-overlay-container .flag-menu {
margin-top: 3rem;
}
check the stackblitz: https://stackblitz.com/edit/mat-menu-xruuog
If it's not working for you please create stackblitz for your code.
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
My css code for navigation drawer
:host{
display: flex;
background-color: #f0fff0;
flex-grow:1;
}
.body-style{
padding: 20px;
min-height: 100px;
flex-grow: 1;
}
HTML:
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content>
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet>
</router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
I am obviously missing something in Flexbox concepts. The <mat-drawer-content>'s width is small.
Don't reinvent the wheel.
Angular team has already covered your need with Flex-Layout.
Once installed, it gives this :
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
No CSS required.