Components: Angular material page left some gap between browser ends and the content

Created on 2 Jul 2017  路  5Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

image
Here, there is no gap in between the ends of browser and the page.

What is the current behavior?

image
Here, in my localhost:4200, there is a humiliating gap (margin) in between the ends of browser and the material toolbar.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Version: 4.2.5
OS: Windows 10 Anniversary Update
Angular Material Version: 2.0.0-beta.7
Chrome Version: 59.0.3071.115

Is there anything else we should know?

Node: v8.1.2
npm: v5.0.3

Most helpful comment

Did you put md-toolbar in md-sidenav-container?
Also, you have to add a fullscreen attribute to md-sidenav-container.
As so:

<md-sidenav-container fullscreen>
    <md-toolbar>Content</md-toolbar>
</md-sidenav-container>

Alternatively, add the following CSS:

body {
    margin: 0;
}

All 5 comments

Did you put md-toolbar in md-sidenav-container?
Also, you have to add a fullscreen attribute to md-sidenav-container.
As so:

<md-sidenav-container fullscreen>
    <md-toolbar>Content</md-toolbar>
</md-sidenav-container>

Alternatively, add the following CSS:

body {
    margin: 0;
}

Do you have any live demo?

Thanks
It worked!!!

not working here, same problem as @YuilTripathee.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Miiekeee picture Miiekeee  路  3Comments

shlomiassaf picture shlomiassaf  路  3Comments

RoxKilly picture RoxKilly  路  3Comments

vitaly-t picture vitaly-t  路  3Comments

LoganDupont picture LoganDupont  路  3Comments