Is it possible to put drop down menu inside one of the tabs in MD-TABS. Something like this.
Was able to do this with following.
<md-tab >
<md-menu>
<div ng-click="$mdOpenMenu($event)">
<span>Testing</span>
<md-icon md-font-icon="fa fa-caret-down"></md-icon>
</div>
<md-menu-content>
<md-menu-item>
<md-button>
<md-icon md-menu-align-target></md-icon>
Redial
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
<md-icon md-menu-align-target></md-icon>
Redial
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
<md-icon md-menu-align-target></md-icon>
Redial
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
<md-icon md-menu-align-target></md-icon>
Redial
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-tab>
Related
Trying to align some menu buttons to left with Angular Material
like on the screenshoot
<div>
<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>
<a mat-button class="menu" routerLink="/">
<span>Just a menu</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</mat-toolbar>
</div>
How can I do this in proper way and still have responsive site?
You can use flexbox like this:
Add a class to your div and add container to specify "right and left block"
.container {
display: flex;
justify-content: space-between;
}
<div fxShow="true" fxHide.lt-md="true" class="container">
<div>
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
The 3 buttons will be on the left and Login, Logon on the right
I'm using this library: https://www.npmjs.com/package/#angular/flex-layout for easier alignment
After installing the library, use this snippet in your code
<div fxShow="true" fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
I am using md-tabs in md-dialog. It works fine in Chrome but creates issue in firefox. My code is,
<md-dialog aria-label="Mango (Fruit)">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Join Us</h2>
<span flex></span>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; " ng-cloak>
<md-tabs md-dynamic-height md-border-bottom md-align-tabs="bottom">
<md-tab label="Register">
<md-content class="md-padding">
<md-input-container class="md-icon-float md-block">
<!-- Use floating label instead of placeholder -->
<label>Name</label>
<input ng-model="name" type="text">
</md-input-container>
<md-input-container md-no-float class="md-block">
<label>Phone Number</label>
<input ng-model="phone" type="text" ng-required="true">
</md-input-container>
<md-input-container>
<label>Country Code</label>
<md-select ng-model="countrycode">
<md-option><em>None</em></md-option>
<md-option ng-repeat="c_code in countrycodes track by $index" ng-value="c_code.code">
{{c_code.name}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="password" type="password" ng-required="true">
</md-input-container>
</md-content>
<md-dialog-actions layout="row">
<md-button class="md-primary" ng-click="register(name,phone,countrycode,password)" style="margin-right:20px;" >
Register
</md-button>
</md-dialog-actions>
</md-tab>
<md-tab label="Login">
<md-content class="md-padding">
<p class="text-center">{{error}}</p>
<md-input-container md-no-float class="md-block">
<label>Phone Number/Email</label>
<input ng-model="phone" type="text" ng-required="true">
</md-input-container>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="password" type="password" ng-required="true">
</md-input-container>
</md-content>
<md-dialog-actions layout="row">
<md-button class="md-primary" ng-click="login(phone,password)" style="margin-right:20px;" >
Login
</md-button>
</md-dialog-actions>
</md-tab>
</md-tabs>
</md-dialog-content>
In firefox it is not visible i.e. md-tabs moves to left of dialog box, keeping white space on right. please let me know, how to fix this.
How can I set Side nav below the toolbar in angular material design? so that sidenav does not come over toolbar..
It's a matter of layout. Just use this page structure:
<div id="main" class="layout-row">
<div id="content" class="layout-column flex">
<md-toolbar>
YOUR TITLE HERE
</md-toolbar>
<md-content>
YOUR CONTENTS HERE
<md-content>
</div>
<md-sidenav class="md-sidenav-left" md-component-id="myPanel">
THE SIDENAV CONTENT
<md-sidenav>
</div>
And that's it!
Here you go. This is what you want, in case it will help someone by the way
<body ng-app="" layout="column">
<md-toolbar>
</md-toolbar>
<md-content flex>
<md-sidenav>
</md-sidenav>
<ui-view></ui-view>
</md-content>
</body
<mat-drawer-container class="example-container">
<mat-toolbar class="example-header" class="fixed-header" color="primary">
<mat-toolbar-row>
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span>
</mat-icon>
<mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span>
</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-drawer #drawer class="example-sidenav" mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
<a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>
</mat-nav-list>
</mat-drawer>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
</div>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>
I'm trying out angular material and using the md-tabs but some reason when applying md-dynamic-height the tabs plus content if the content exceeds the length of the screen. I just what the content to scroll can't figure out what I'm doing wrong. Here's an example of what I am doing.
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
Sample layout :
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<md-tab label="1">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="2">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="3">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
</md-tabs>
Try md-dynamic-height="" in md tabs
<md-tabs md-dynamic-height="">
I have a question similar to this one Flexbox - two fixed width columns, one flexible
But that one is about doing it using just Flexbox. I'm trying to use AngularJS Material. I want my left and right divs to be a fixed 28px width, and the center div to flex.
Something like this:
<div layout="row" layout-margin>
<!-- Alphabet - First Half -->
<div flex="28px">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">A</div>
</md-button>
</md-list-item>
</md-list>
</div>
<div flex>
<md-content></md-content>
</div>
<!-- Alphabet - Second Half -->
<div flex="28px">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">N</div>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
The flex attribute value is restricted to 33, 66, and multiples of five.
For example: flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....
Try this
<div layout="row" layout-margin>
<div flex="25">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">A</div>
</md-button>
</md-list-item>
</md-list>
</div>
<div flex>
<md-content></md-content>
</div>
<div flex="25">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">N</div>
</md-button>
</md-list-item>
</md-list>
</div>
</div>