CODEWITHSUNDEEP
angularangular-material2
M3enjamin
M3enjamin

Reputation: 190

angular/material2 .md-sidenav-content width 100%

Is it possible to have the sidenav content take the full width in angular/material2 ? If you follow the tuto on the website, you can define your content like this:

<md-sidenav-container>
  <md-sidenav>
    <!-- sidenav content -->
  </md-sidenav>

  <!-- primary content -->
</md-sidenav-container>

But what they really do is they add an <div class="md-sidenav-content" ...> element that wraps your "primary content".

Is it possible to give that element a width:100%? Or even better, a flex: 1 1 100%; styling? Just adding that in the css for the .md-sidenav-content class doesn't seem to work...

Upvotes: 2

Views: 2908

Answers (2)

M3enjamin
M3enjamin

Reputation: 190

Nevermind. I found the solution. I had a display: flex; on the <md-sidenav-container> element. Removing that did the trick.

Upvotes: 3

Igor Janković
Igor Janković

Reputation: 5532

It is possible. You just need to add width: 100% on md-sidenav element.

<md-sidenav #sideNav style="width: 100%"></md-sidenav>

Upvotes: 0

Related Questions