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...
Related
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 would like to make it so that when I click the mat-button, the menu items would be the same size and push everything else down. Below are attached images of the current situation and desired.
Current closed dropdown
Current opened dropdown
Desired closed dropdown
Here is my HTML code:
<mat-footer>
<div class="footerLinks">
<span *ngFor="let footerLink of footerContent.footerLinks">
<span *ngIf="footerLink.footerDrop.length > 1 else single">
<a mat-button [matMenuTriggerFor]="subLinks" href="javascript:void(0)" title={{footerLink.subFooterTitle}}>{{footerLink.subFooterTitle}}
<mat-icon>arrow_drop_down</mat-icon>
</a>
<mat-menu #subLinks="matMenu" arrowPosition="up">
<a mat-menu-item *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</mat-menu>
</span>
<ng-template #single >
<a mat-button *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</ng-template>
</span>
</div>
<div class="social">
<span *ngFor="let socialLink of footerContent.socialLinks">
<a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}></a>
</span>
</div>
<div class="terms">
<mat-copywrite-footer [innerHTML]="footerContent.finePrint.value"> </mat-copywrite-footer>
</div>
</mat-footer>
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'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 have a list, how I can do to put 2 buttons to the right and one on the left?
This is my code, I tried many things but not working.
<ion-content>
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="refrescarNuevosPosts()">
</ion-refresher>
<div class='list'>
<a class='item item-avatar-left' ng-repeat="post in posts" ng-click='openLink(post.url)'>
<img ng-src='{{ post.thumbnail}}' ng-if="post.thumbnail.indexOf('http') === 0"/>
<h2 class='post-title'>{{ post.title}}</h2>
<p><span am-time-ago="post.created_utc" am-preprocess="unix">{{ post.domain}}
</p>
</a>
</div>
<ion-infinite-scroll
on-infinite="cargarNuevosPosts()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Try this
<ion-list>
<ion-item collection-repeat="c in clientes | filter:pesquisa" ng-click="getCliente(c)" class="item-button-right item-button-left">
<!-- 1 button -->
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
<p>{{c.email}}</p>
<!-- 2 buttons -->
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</ion-item>
</ion-list>
The result of ion-list
See http://pointdeveloper.com/add-multiple-buttons-to-list-item-for-ionic-framework-apps/
I hope that I have helped in some way