CODEWITHSUNDEEP
htmlcssangularjsangular-material
Boas Enkler
Boas Enkler

Reputation: 12557

Angular Material Not Locked sidebar

I've a sidebar like this:

enter image description here Button 1 Button 2 This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.

This is the content area!

Current Behaviour - when i remote the md-is-locked-open attribute and start to show the sidebar if the user clicks a button, then the side bar is fullscreen and not inside the content area.

enter image description here So it differs in the following points form the locked version:

Required Behaviour - what do i have to change to have it inside the content area? So it looks exactly the sameway like it is when its locked .

Codepen Here

Upvotes: 5

Views: 821

Answers (1)

Vi100
Vi100

Reputation: 4203

Just change the:

<div layout="row" flex>

above the sidenav for:

<md-content layout="row" flex>

and the corresponding closing tag. And that's it!

The md-toolbar must be sibling to an md-content to get the behaviour you are looking for.

EDIT

For your further requirements please check this Codepen I've made. It does exactly what you want (override the sidenav behaviour to hide the overlay and push the contents to the right): http://codepen.io/anon/pen/pjXYMa

Upvotes: 5

Related Questions