I am using an Angular material menu to create the user menu. As the first information I want to display the user's first name and last name.
Here I am interested in the behavior of a disabled mat-menu-item because of the non-clickable nature of it but I cannot override the behavior via CSS. I want it to be bold as in the gitlab user menu and not the light gray as it is.
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>account_circle</mat-icon>
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below" >
<p class="user-info" mat-menu-item disabled>Name Surname</p>
<mat-divider></mat-divider>
<button class="menu-item" mat-menu-item>Profile</button>
<mat-divider></mat-divider>
<button mat-menu-item>Sign out</button>
</mat-menu>
</div>
In your css you can say:
.mat-menu-item[disabled] {
color: default;
}
Related
Hi have buttons on my website that could have material icons inside (left or right). For example:
<button class="btn btn-primary">
Button Label
</button>
<button class="btn btn-primary">
Button Label
<span class="material-icons-outlined"> settings </span>
</button>
<button class="btn btn-primary">
<span class="material-icons-outlined"> settings </span>
Button Label
</button>
As you can see, icon could be present or not and in case is present, it could be before or after text.
I'd need to "space" this icon from text, but I can't simply apply margin:0 20px to it because I'd need to create space only between text and icon and from icon to button side.
I thought that a possible solution could be wrap text label in another span to target it and then use :first-child or :last-child to target icon but... if could be possible to not add this wrap could be ideal.
<button class="btn btn-primary">
<span>Button Label</span>
<span class="material-icons-outlined"> settings </span>
</button>
.material-icons-outlined:last-child {
margin-left: 20px;
}
Did you try giving text an id and icon an id, then providing a margin? Just a thought. I believe you can also wrap it as you mentioned. Flexbox might be worth a go as well.
I have the following problem: i have a <div> and inside of that tag i have a button, but i cant center the button vertically and horizontally inside the <div> also i want the button to be center for phones for that i saw it toggle device toolbar
Really dont know how to solve it, im new using Angular
Below i will let the code of my <div> that has the button inside, the picture of how the button is displayed also i'm using Angular material
Div tag code
<div *ngIf="nav_bar==false" class="colour large">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="'/'">
<mat-icon>dialpad</mat-icon>
<span>Inicio</span>
</button>
<button mat-menu-item [routerLink]="['/nosotros']">
<mat-icon>voicemail</mat-icon>
<span>Nosotros</span>
</button>
<button mat-menu-item [routerLink]="['/contacto']">
<mat-icon>notifications_off</mat-icon>
<span>Contacto</span>
</button>
</mat-menu>
<button class="mat-button col-xs-3" (click)="nav_bar=!nav_bar">
<img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>
It's not an angular thing, it's an html/css thing. If you're going to use bootstrap you might want to check out the grid documentation a bit to better familiarize yourself with how it works, along with the utility classes. Something like this would probably be more what you're looking for.
<div *ngIf="nav_bar==false" class="colour large d-flex align-items-center">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="'/'">
<mat-icon>dialpad</mat-icon>
<span>Inicio</span>
</button>
<button mat-menu-item [routerLink]="['/nosotros']">
<mat-icon>voicemail</mat-icon>
<span>Nosotros</span>
</button>
<button mat-menu-item [routerLink]="['/contacto']">
<mat-icon>notifications_off</mat-icon>
<span>Contacto</span>
</button>
</mat-menu>
<button class="mat-button mx-auto" (click)="nav_bar=!nav_bar">
<img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>
I have a mat-menu dropdown, having a mat-button in it.
I want to remove the overlay that appears once user clicks the dropdown.
I am able to remove the hover overlay by writing the following css.
.no-hover-effect ::ng-deep .mat-button-focus-overlay {
background-color: transparent;
}
This is how html code for mat-button looks like.
<div class="mat-menu-wrapper mat-menu-size" [matMenuTriggerFor]="abc">
<button mat-button class="mat-button no-hover-effect">
<span class="mat-button-wrapper"><span class="mat-menu-text">
xyz</span>
</span>
</button>
<mat-menu #abc="matMenu">
<button mat-menu-item>
xyz
</button>
<button mat-menu-item>
xyz
</button>
</mat-menu>
<mat-icon class="mat-icon-ui">arrow_drop_down
</mat-icon>
</div>
You need to disable the ripple effect of mat-button. As mentioned here you can disable it by adding [disableRipple]="true" to your mat-button.
Learn more about ripple effect
I am trying to change CSS property by element ID using vanilla JS?
I am trying to achieve the following effect:
After the first button is clicked on the bottom bottom, the first button on the top should change it's class from btn-dark to btn-warning.
The remaining buttons should follow this same pattern: #b2 clicked should result in #d2 being changed from btn-dark to btn-warning.
My current attempt:
<div class="row">
<button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-dark"
id="d{{number}}"
>
</button>
</div>
<div class="row">
<button (click)="onClick($event)"
*ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-secondary"
id="b{{number}}">{{number}}
</button>
</div>
Screenshot displaying the template
Use ngClass, e.g.:
<button [ngClass]="{'btn-dark': true}">...</button>
Try like this
it will changed one of them at a time
stackblitz demo link
I am trying to add a space between these two buttons, So I used bootstraps modal-footer class and I believe the buttons were supposed to have space in between, but there is no spacing. My code is below:
< div className = "modal-footer">
<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button>
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button>
</div>
The white-spaces between your JSX tags are not kept once the JSX is compiled to javascript. If you want to keep them anyway, you can do this:
<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button>
{' '}
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button>
Put them inside 'btn-toolbar', not 'modal-footer'. The .modal-footer class is used to define the style for the footer of the modal. For .btn-toolbar class see more info on Bootstrap documentation.
Try this code:
<div className="btn-toolbar">
<button className="btn btn-primary pull-right" formNoValidate={true} type="submit">Submit</button>
<button className ="btn btn-primary pull-right" onClick={this.resetForm} type="reset">Reset</button>
</div>
Please note: I have used 'button' html tag NOT 'Button' of bootstrap. That's why I have changed the bsstyle to className. You can try on your bootstrap setup.
There are other css methods also using which you can provide space between buttons easiest one is to assign 'margin-right' to button.
To fix this I removed the "pull-right" and the spacing worked from bootstraps "modal-footer" class.
<div className= "modal-footer">
<Button bsStyle = "primary" formNoValidate={true} type="submit">Submit</Button>
<Button bsStyle = "default" onClick={this.resetForm} type="reset">Reset</Button>
</div>