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>
Related
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;
}
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
How can I have the more_vert button align on the right side in the header?
I'm using Angular 7 and Material UI.
<mat-toolbar color="primary" class="mat-elevation-z10">
<span>
<mat-icon>favorite</mat-icon>
Derek Zoolander's Center for Models Who Can't Find Love
</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon>more_vert</mat-icon>
</button>
The key was to have <span class="example-spacer"></span> between your title <span> and the "more_vert" mat-icon.
complete HTML:
<mat-toolbar color="primary" class="mat-elevation-z10">
<mat-toolbar-row>
<mat-icon>favorite</mat-icon>
<span>
Derek Zoolander's Center for...
</span>
<span class="example-spacer"></span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon class="example-icon" aria-hidden="false" aria-label="expand menu">more_vert</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
you can check working example here...
I've searched all over and can't seem to find an answer for this so posting here.
I have a nav bar that uses mat-toolbar. It works great on any screen tablet size or above but when the nav bar doesn't fit on screen the part that doesn't fit doesn't display. I've tried using bootstrap to fix the issue but haven't had any luck. Here is a stackblitz link to the repo stackblitz.com/github/jearl4/portfolio. The nav bar code is in the app->app.component.html file
Here is my navbarcode:
<nav class="navbar navbar-toggleable-xs">
<mat-toolbar color="primary">
<mat-toolbar-row>
<h1>J.T. Earl</h1>
<span class="navbar-spacer"></span>
<button mat-button routerLink="/home">
<mat-icon>home</mat-icon>
</button>
<button mat-button routerLink="/about" routerLinkActive="active">About</button>
<button mat-button>Services</button>
<button mat-button>Contact</button>
<button mat-button routerLink="/capm">Capm</button>
</mat-toolbar-row>
</mat-toolbar>
</nav>
<!-- routed view goes here -->
<router-outlet></router-outlet>
and my css:
.navbar-spacer {
flex: 1 1 auto;
}
.header {
min-width: 319px;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
}
I've attempted the solution from Create a Responsive Toolbar using Angular Material but that hasn't solved my problem. That post is about a responsive navbar and while making the navbar responsive is probably involved in fixing my issue that is not the problem I'm trying to solve. Instead I am just trying to fix the cut off issue, the solution doesn't need to involve responsive design, although that would be welcome.
I had to change my navigation style from a strictly horizontal layout to horizontal with a vertical side nav on small screens but this code is how I fixed my problem.
<nav class="navbar navbar-toggleable-xs">
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<h1>title</h1>
<span class="navbar-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<button mat-button routerLink="/home">
<mat-icon>home</mat-icon>
</button>
<button mat-button routerLink="/about" routerLinkActive="active">About</button>
<button mat-button routerLink="/capm">Capm</button>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button mat-button routerLink="/home">
<mat-icon>home</mat-icon>
</button>
<button mat-button routerLink="/about" routerLinkActive="active">About</button>
<button mat-button routerLink="/capm">Capm</button>
</div>
</mat-sidenav>
I would like to add 3 spaces between two right align button. Is there any bootstrap solution for it without adding custom css?
I do this :
<div class="text-right">
<button class="btn-info btn">Log in</button>
<!-- Add 3 spaces between button -->
<button class="btn-info btn">Log Out </button>
</div>
Fiddle demo : http://jsfiddle.net/6816gq84/1/
You can add btn-toolbar class to the container div.
<div class="text-right btn-toolbar">
<button class="btn-info btn">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
Have a look here.
I do this rudimentary solution: How to add space between bootstrap buttons in same div?.
<div class="btn-group pull-right row">
<div class="col-md-3"><button class="btn btn-default" type="button">Clôturer</button></div>
<div class="col-md-1"></div>
<div class="col-md-3"><button class="btn btn-primary" type="button">Soumettre</button></div>
</div>
This also work fine for me:
<div style="display: flex ; justify-content: flex-end">
<button class="btn-info btn mr-3">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
I'm not sure any bootstrap solution already exists for what you want to do, but there are other way, depending what you mean by "custom css".
You can add a span balise for exemple and add an inline css defining the width to 3em (3 spaces). It's HTML/CSS but you don't modify the css of the button's class.
<div class="text-right">
<button class="btn-info btn">Log in</button>
<span style="width:3em;"> </span>
<button class="btn-info btn">Log Out </button>
</div>