view raw
Raja Anbazhagan Raja Anbazhagan - 11 months ago 610
CSS Question

how to make md-sidenav push content to the right instead of overlapping it?

Is there any way I can make the side nav sticky so that when the side nav opens, it pushes the content of the page to the right instead of just overlapping it like ?

Here is the plunker link of my sample work

<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet"
<link href="" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<body ng-app="BlankApp" layout="column" ng-cloak ng-controller="AppCtrl">
<md-toolbar class="md-whiteframe-7dp" layout="row">
<md-button class="menu" ng-click="toggleSidenav();"><i class="material-icons">menu</i></md-button>
<h3>Hello Toolbar</h3>

<md-content id="body-part" flex layout="row" layout-fill>
<md-sidenav md-disable-backdrop class="md-whiteframe-7dp" md-component-id="left-side-nav"
flex style="background: cyan">
<span>Hello Nav..!!</span>
<div flex style="padding: 10px;overflow-y: scroll; background: darkcyan">
<span>Hello Content...!</span><br>

<!-- Angular Material requires Angular.js Libraries -->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<!-- Angular Material Library -->
<script src=""></script>

<!-- Your application bootstrap -->
<script src="js/script.js"></script>


You need to add a relative position to the sidenav css styling:

From your Plunker:

md-sidenav,, {
    min-width: 200px !important;
    width: 50vw !important;
    max-width: 200px !important;