Mat Sidenav Content Margin Left Too Much

When the drawer is closed the margin left is 0px as expected.

Mat sidenav content margin left too much. The content on the right side of the page mat sidenav content is positioned relatively with a dynamically calculated inline style of margin left. There must be some kind of timing issue in calculating the mat sidenav content right margin. The following table lists out the parameters and description of the different attributes of md sidenav. Set the width of the side navigation to 0 and the left margin of the page content to 0 and the background color of body to white function closenav document getelementbyid mysidenav style width 0.

In the release 2 0 0 beta 12 the right margin is randomly miscalculated for mat sidenav content when sidenav in in side mode. Xxx being the width of mat sidenav. Mat sidenav mat sidenav left position end end sidenav. So only on page load the issue exists.

Hi hmm i think is hard to have a hide button cause if you click show button is showing a overlay on all resolution so if you want close sidenav you have to click on that overlay. Mat sidenav is positioned absolutely with top and bottom set to zero. Add the class sidenav close to an element inside the sidenav and any click event on that element will cause the sidenav to close. If the sidenav mode is dynamically switched between over and side the problem randomly resolves itself.

Piotr glejzer staff commented 2 years ago. Amelcher pro commented 3 years ago. Sticknitro what i meant was the content inside the sidenav changes depending on what triggers it to open. Couldn t this be done with two flex boxes without any javascript.

Jonathan the background styles for the sidenav are controlled from the slide out line. This is useful in single page apps where the page does not refresh on link clicks. The md sidenav an angular directive is used to show a container component which can be shown or hide programmatically it slides out over the top of the main content region by default. Now if the drawer is opened mat sidenav content has margin left of 200px as expected.

The background mdb uses in their sidebar is the sn bg 4 if you where change that class to white for inatance it would change the background of the sidebar to the color white however you would also need to add the white class to the ul class directly underneath the. Sidenav push content w opacity.