Responsive design can be improved for small devices

[ghost]

Toolbar title, breadcrumb and directive name are poorly displayed:

A proposed solution would be to switch to menu when width is smaller than 771 pixels instead of 600.

[ThomasBurleson]

When the content width [box area with Basic Usage] is great than 900px, then the SideNav component is locked into the open position. Less than that and it auto-hides.

[mzbyszynski]

@ThomasBurleson Are you sure? I think currently on the documentation site, the sidenav is locked open to gt-sm, which is greater than 600px not 900px. Maybe it should be gt-md?

  <md-sidenav layout="column"
              style="overflow: hidden; display: flex;"
              class="md-sidenav-left md-whiteframe-z2"
              md-component-id="left"
              md-is-locked-open="$media('gt-sm')">

[ThomasBurleson]

Doe the commit c62b970536d on master not address this correctly?

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-md')">

Or perhaps I am misunderstanding something ?

Note this will be available later this week in a tagged 0.7.0-rc1 release.

[mzbyszynski]

Hi @ThomasBurleson, The screenshot that @MCBL posted wasn't of the md-sidenav demo (which I agree is working correctly), it was the progress-circular demo with the overall sidenav that is used to navigate the documentation site, so I took that to mean his issue was with that sidenav, but I'm not totally sure 😄 . I do think it might make sense to hide the sidenav on the documentation site for medium sized devices though...

[ThomasBurleson]

@MCBL - So this issue is about the responsive layout of the title bar text ? Missed that... sorry.

[ghost]

Exactly yes, it's the header bar text that is poorly displayed. It clearly needs more space. That's why I propose to switch to menu when width is smaller than 771 pixels instead of 600.

[gkalpak]

@ThomasBurleson: The commit you mentioned is for the sidenav demo.
@MCBL is basically proposing the same change for the Docs App's sidenav.

[marcysutton]

Closed with bfc947f

[ghost]

It is still poorly displayed. Juste resize your browser on page with a lot of text. It's ugly!

[marcysutton]

Are you looking at material.angularjs.org or a local build from master? We are still working to get the site updated, which won't reflect these changes.

[ghost]

At material.angularjs.org. Ok all right, thanks.

[ashishpatel02]

@ThomasBurleson as you said "When the content width [box area with Basic Usage] is great than 900px, then the SideNav component is locked into the open position. Less than that and it auto-hides."

How can i fix to open for all the resolutions?

[ThomasBurleson]

@ashishpatel02 - try md-is-locked-open="true"