here is the the plunkr example, I have a toolbar which is on top of my scrollbar, tried, but failed... Would be very appreciated if someone could help me.
Here is sample code:
app.component.html:
<md-toolbar class="fixed-header">
<button class="app-icon-button" (click)="start.toggle()">
<i class="material-icons app-toolbar-menu">menu</i>
</button>
</md-toolbar>
<md-sidenav-container fullscreen>
<md-sidenav #start class="app-sidebar" mode="side">
test
</md-sidenav>
<div class="main-container-content" style="max-width:3px;">
{{ text }}
</div>
</md-sidenav-container>
Related
I have a small form designed but it is misaligned. I am trying to align properly but not sure why its becoming so messy. The problem with the design is when i click on plus button the below things happen:
The blue color content right side gets increased and in turn it adds extra space vertically which is messy. I want the blue color content to be at fixed height.
The minus button needs to be placed properly beside its corresponding line.
Also the plus button should be aligned properly.
Can anyone help me out on this.
The below is my code:
<div class="row">
<div class="col-md-8">
<mat-dialog-content class="mat-typography">
<section *ngFor="let address of endpointsBulk; let i = index;">
<div class="row">
<div>
<!-- <h4>Endpoint {{i + 1}}</h4> -->
</div>
<div class="text-right" *ngIf="endpointsBulk.length > minEndpoints">
<button mat-button color="danger" (click)="removeEndpointForm(i)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="row">
<div>
<mat-form-field class="example-full-width">
<mat-label>Choose Method</mat-label>
<mat-select [(ngModel)]="address.method">
<mat-option value="post">POST</mat-option>
<mat-option value="get">GET</mat-option>
<mat-option value="put">PUT</mat-option>
<mat-option value="delete">DELETE</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="example-full-width">
<input name="search" id="search" [(ngModel)]="address.endpoint" matInput type="search"
placeholder="Endpoint">
</mat-form-field>
</div>
</div>
</section>
<div class="text-right" *ngIf="endpointsBulk.length < maxEndpoints">
<button mat-button color="primary" (click)="addEndpoinForm();">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</mat-dialog-content>
</div>
<div class="col-md-4 callout callout-info no-margin">
<li>Format: post:/api/v1/addAccount/id
<br> Usage :
<ul>
<li>post:/api/v1/addAccount/id</li>
<li>get:/api/v1/getAccount/id</li>
<li>put:/api/v1/updateAccount/id</li>
<li>delete:/api/v1/deleteAccount/id</li>
</ul>
</li>
</div>
</div>
<mat-dialog-actions class="pull-right" align='end'>
<button mat-raised-button class="nav-btn text-primary" type="submit" [disabled]="checkFormValidity()"
(click)="saveEndPoint()">Save</button>
<button mat-raised-button class="nav-btn text-primary" (click)="dialogRef.close()">Cancel</button>
</mat-dialog-actions>
The design is something like below:
You can limit the height of the right side with height: fit-content;
You seem to be putting each element (minus, form) inside a separate row, try using columns instead if you want them next to each other
The alignment of plus is just a matter of putting it in a correct container, please specify what is "aligned properly"
I have a mat-sidenav in my project and I want to link a text to another URL, but when I use routerLink it doesn't work but it works out of the side-nav.it even works in the toolbar. what is the problem? here are my codes:
HTML:
<mat-toolbar>
<mat-toolbar-row>
<div>
<button mat-icon-button class="button" (click)="sidemenu.toggle()">
<mat-icon class="menu">menu</mat-icon>
</button>
</div>
<div mat-card-avatar class="example-header-image"></div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav mode="side" opened #sidemenu>
</mat-sidenav>
<mat-sidenav-content>
<div routerLink="/">home</div>
</mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-container>
I am using angular 4 with its respective Material . My app.component.html looks like this :
<!--The whole content below can be removed with the new code.-->
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-
24|md-36|md-48">menu</md-icon></button>
<span>Material 2</span>
<span class="example-spacer"></span>
</md-toolbar>
<md-sidenav-container layout="column" flex style="background: plum;">
<md-sidenav #sidenav side="left" class="example-sidenav" flex layout="column" style="background: plum;">
<md-list>
<div class="row">
<md-list-item><md-icon>explore</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>map</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>home</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>android</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>done</md-icon> <span>item</span></md-list-item>
</div>
</md-list>
</md-sidenav>
<md-grid-list cols="4" rowHeight="100px" layout="column" flex>
</md-grid-list>
</md-sidenav-container>
`
How to make the md-sidenav-container take up all of the space left vertically?
Plunkr : https://plnkr.co/edit/Mvm6zSifW0EpeKtmuSEA?p=preview
Note: I don't want a CSS min-height, height: 100% fix. Only a clean class/directive based solution for Angular Material 2/4.
Move your <md-toolbar> inside the container and add the fullscreen attribute to the <md-sidenav-container>:
<md-sidenav-container layout="column" flex style="background: plum;" fullscreen>
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-24|md-36|md-48">menu</md-icon></button>
<span>Hems IRCA</span>
<span class="example-spacer"></span>
</md-toolbar>
...
See this answer for more details
Updated plunker
I'm trying to design a toolbar in Material and Angular2 as shown in the image below. I'm unable to format the toolbar such that the search bar comes in the center (and is in white) and the Create Project and remaining other buttons are flush to the right. The code for this is as follows:
<md-sidenav-container fullscreen>
<md-sidenav mode="side" opened="false" #sidenav>
<md-toolbar color="primary">AppLogo</md-toolbar>
</md-sidenav>
<div class="main-content">
<md-toolbar color="primary">
<span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
<span><h2>Application Name</h2></span>
<md-input-container>
<input mdInput placeholder="Search">
</md-input-container>
<div id="right_nav">
<span><button md-button><md-icon>add</md-icon> Create Project</button></span>
<span><button md-button><md-icon>help</md-icon></button></span>
<span><button md-button><md-icon>alarm</md-icon></button></span>
<span><button md-button><md-icon>face</md-icon></button></span>
</div>
</md-toolbar>
</div>
</md-sidenav-container>
How do I go about doing this using the available Material constructs?
Split toolbar content in 3 part then align each part as needed, flex let content cover 100% width.
<md-sidenav-container fullscreen>
<md-sidenav mode="side" opened="false" #sidenav>
<md-toolbar color="primary">AppLogo</md-toolbar>
</md-sidenav>
<div class="main-content">
<md-toolbar color="primary" layout="row">
<div flex layout="row" layout-align="start center">
<span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
<span><h2>Application Name</h2></span>
</div>
<div flex layout="row" layout-align="center center">
<md-input-container>
<input mdInput placeholder="Search">
</md-input-container>
</div>
<div id="right_nav" flex layout="row" layout-align="end center">
<span><button md-button><md-icon>add</md-icon> Create Project</button></span>
<span><button md-button><md-icon>help</md-icon></button></span>
<span><button md-button><md-icon>alarm</md-icon></button></span>
<span><button md-button><md-icon>face</md-icon></button></span>
</div>
</md-toolbar>
</div>
</md-sidenav-container>
EXAMPLE
I have a button to open my navbar:
And after I click it it get's some kind of hitmarker:
After clicking on some navbar item (thus switching to next state/view) the hitmarker should disappear. Unforunately the hitmarker is present till I click on a random element.
The html for the button:
<div ng-controller="navbarCtrl" ng-cloak>
<md-content>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="toggleMenu()" aria-label="Menu">
<md-icon md-svg-icon="assets/img/menu.svg"></md-icon>
</md-button>
<h2>
<span><a ui-sref="overview">Test</a></span>
</h2>
<span flex></span>
<md-button class="md-icon-button" ui-sref="account" aria-label="Account">
<md-icon md-svg-icon="assets/img/account.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
</md-content>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
<md-toolbar class="md-theme-indigo" layout="row">
<h1 class="md-toolbar-tools">Menu</h1>
<span flex></span>
<md-button class="md-icon-button" aria-label="close" ng-click="close()">
<md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon>
</md-button>
</md-toolbar>
<div layout="column" layout-align=" center">
<md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="overview">Overview</md-button>
</div>
</md-sidenav>
</section>
</div>
<div ui-view></div>
What do I have to change in order to fix this?
You need this in your CSS:
.md-focused {
background: transparent !important;
}
add this to your CSS:
md-button:focus, md-icon:focus {
outline: none;
}