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>
Related
I'd like to have a Bootstrap Offcanvas displayed, and still be able to interact with the rest of the page without getting the Offcanvas closed. Is this possible? None of these examples address that: https://getbootstrap.com/docs/5.2/components/offcanvas/.
You could use an offcanvas with a static backdrop and add this CSS rule to hide the backdrop :
.offcanvas-backdrop {
display: none;
}
.offcanvas-backdrop {
display: none;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<button class="btn btn-danger" type="button" onclick="alert('clicked!')">You should not be able to click me</button>
</div>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
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'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="">
The button-bar is not showing its full height with the nav-bar, seems like it is trying to fit to the ion-nav-bar. Here is what I've got so far:
index.html
<body ng-app="starter">
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
tab-dash.html
<ion-view view-title="Dashboard">
<div class="button-bar">
<a class="button button-positive">Mon</a>
<a class="button button-positive">Tue</a>
<a class="button button-positive">Wed</a>
<a class="button button-positive">Thu</a>
<a class="button button-positive">Fri</a>
</div>
<ion-content class="padding">
...
</ion-content>
</ion-view>
Try This.
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div class="button-bar">
<a class="button button-positive">Mon</a>
<a class="button button-positive">Tue</a>
<a class="button button-positive">Wed</a>
<a class="button button-positive">Thu</a>
<a class="button button-positive">Fri</a>
</div>
</ion-content>
</ion-view>
EXTRA : I assume you are using the starter template. If you want those tabs to stick to top. You can use the class tabs-top in ion-tabs
I got it working by using ion-tabs as suggested by Karan Kumar. To resolve the padding issue, I added has-tabs-top to the ion-content. Use button-clear to remove button's borders
<ion-view view-title="Dashboard">
<ion-tabs class="tabs-positive tabs-top">
<div class="button-bar">
<a class="button button-clear">Mon</a>
<a class="button button-clear">Tue</a>
<a class="button button-clear">Wed</a>
<a class="button button-clear">Thu</a>
<a class="button button-clear">Fri</a>
</div>
</ion-tabs>
<ion-content class="padding has-tabs-top">
...
</ion-content>
</ion-view>
When I run this the image and carousel overflow and you have to scroll down on the page to see the bottom of image and carousel...
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src= "/assets/run3.jpg" width = "100%" alt="photo">
<div class="carousel-caption">
<h3>Sign Up Now!</h3>
<p>This is Where amazing happens</p>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
here is what happens: dropbox.com/sh/tdo3928f453123h/jTbquZNM37
You can force your slider & image width and height :
#carousel-example-generic,
#carousel-example-generic .item,
#carousel-example-generic .item img {
height: 100%;
}
#carousel-example-generic .item img {
width: 100%;
}
Bootply
Note : this won't keep proportions, but it could fit your needs.