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.
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>
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 an Angular 11 project with a custom dropdown component which uses mat-menu for showing dropdown items.
I am passing a mat-button inside this dropdown component (along with the other menu items) that isn't working properly. When I add color="accent" mat-button's background-color doesn't change. Or rather, ._theming.scss is not adding the background-color property.
Kindly note that I have already imported MatButtonModule everywhere and it's working everywhere else in the project but in mat-menus.
This is dropdown.component.html:
//this button is not the one I'm talking about, this is just the button which opens and closes
the dropdown custom component and accepts an arrow, a title, and an icon
<button
mat-button
disableRipple
[ngClass]="{ 'is-open': isOpen, 'no-arrow': !hasArrow }"
[matMenuTriggerFor]="theMenu"
(menuOpened)="onMenuOpen($event)"
(menuClosed)="onMenuClose($event)"
#theMenuTrigger
>
<ng-container *ngIf="hasIcon">
<mat-icon svgIcon="{{ icon }}">{{ icon }}</mat-icon>
</ng-container>
<div *ngIf="!!title">{{ title }}</div>
<ng-container *ngIf="hasArrow"
><mat-icon
[ngClass]="{ 'is-open': isOpen }"
svgIcon="arrow-down"
class="icon-arrow__down"
></mat-icon
></ng-container>
</button>
<mat-menu #theMenu="matMenu" class="dropdown-menu">
<ng-content></ng-content>
</mat-menu>
And this is my navbar.component.html where I'm using the dropdown component:
<dropdown-menu title="حساب کاربری" icon="profile" [hasArrow]="true">
<div class="container__welcome--user">
<span
mat-menu-item
disabled
class="navbar__personal-info-item text__welcome--user"
>
<mat-icon
svgIcon="profile"
aria-hidden="false"
aria-label="profile SVG icon"
></mat-icon>
سلام، {{ personalInfo }}</span
>
<span
mat-menu-item
disabled
class="navbar__personal-info-item email"
*ngIf="!!traderEmail"
>{{ traderEmail }}</span
>
</div>
<a
mat-menu-item
routerLink="/user/settings"
[queryParams]="{ tab: 'security' }"
>
<mat-icon
class="icon__user--account"
svgIcon="security-settings"
aria-hidden="false"
aria-label="settings SVG icon"
></mat-icon>
<span>تنظیمات امنیتی</span>
</a>
<a
mat-menu-item
routerLink="/user/settings"
[queryParams]="{ tab: 'kyc' }"
>
<mat-icon
class="icon__user--account"
svgIcon="kyc-settings"
aria-hidden="false"
aria-label="kyc SVG icon"
></mat-icon>
<span>احراز هویت</span>
</a>
//THIS BUTTON IS THE ONE I'M TALKING ABOUT
<button
mat-flat-button
color="accent"
class="sign-out-button"
(click)="requestSignOut()"
>
<span> خروج </span>
</button>
</dropdown-menu>
To set color of button I suggest to use style.
If you set style="color: red !important;" inside the button. It will color the text
<button mat-flat-button style="color: red !important
(click)="select('Basic.Item1')">Basic.Item1
</button>
OUTPUT will be like below
If you set style="background-color: red !important;" . It will color the background of the text
<button mat-flat-button style="background-color: red !important
(click)="select('Basic.Item1')">Basic.Item1
</button>
OUTPUT will be like below
You can also use [ngStyle]="mystyle" like
HTML
<button mat-flat-button [ngStyle]="mystyle"
(click)="select('Basic.Item1')">Basic.Item1
</button>
TS
mystyle:any= { backgroundColor: 'red'};
Note: !important will override the CSS of the button for specific attribute.
I have the current situation:
Relevant code:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="space-between">
<span class="page-headline">
<img class="logo" src="./logo.png"/>club
</span>
<button md-icon-button class="main_menu_button1" (click)="dinnerClicked()">
<md-icon>local_pizza</md-icon>
</button>
<button md-icon-button class="main_menu_button2" (click)="notificationsClicked()">
<md-icon>notifications</md-icon>
</button>
<button md-icon-button class="main_menu_button3" (click)="eventsClicked()">
<md-icon>event_note</md-icon>
</button>
</div>
</md-toolbar>
I just want the 3 icons to be adjacent closely to each other and align to the right. If I change fx-layout-align to fx-layout-align-xs, I get almost what I want:
But to the left instead of to the right...
I have tried many CSS configurations but none worked for me, is there any easy way to acheive this? Many thanks.
If you are using this plugin: https://github.com/angular/flex-layout#api-overview
i suggest:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="end" >
...
</div>
</md-toolbar>
Just add below code in your css:
<style>
.main_menu_button1,.main_menu_button2,.main_menu_button3
{
float:right;
}
</style>
I want to change bootstrap glyphicon color to "yellow" because current color is showing in white that looks like Delete button. How can i change color of glyphicon-folder-close or use any other glyphicon that display folder image better ?
main.html
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button>
You can also change the icon/text by adding to the class "text-success" for green, "text-danger" for red etc. This will change the color of the icon itself.
<span class="glyphicon glyphicon-usd text-success"></span>
Also this has been answered here.
Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
Use color
<button type="button"
class="btn btn-info btn-lg" ng-click="serverFiles()"
style="margin-left: 10px; color:#FF0000;">
<span class="glyphicon glyphicon-folder-close"></span></button>
But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items
<button type="button"
class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
style="margin-left: 10px;">
<span class="glyphicon glyphicon-folder-close"></span></button>
edn for external css
.mybtn-blue {
color: blue;
}
Use the following HTML code
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close yellow"></span></button>
And the css code
.yellow {
color: #FFCA28;
}
here is the demo http://jsfiddle.net/S3R23/1217/
You can change color of the icon by directly specifying color name, however this will only apply to targeted icon.
To change the color, do this:
<span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span>
Just edit the span tag in your code to the one above, making your code to look like this:
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span></button>
You can change glyphicon color to any value. see below given example
<span aria-hidden="true" class="glyphicon form-control-feedback glyphicon-ok"></span>
//css
.glyphicon.form-control-feedback.glyphicon-ok{
color: #20032d !important;
}