CODEWITHSUNDEEP
angularangular-material2
user1552172
user1552172

Reputation: 676

Angular 2 Material 2 top navbar\toolbar

I have the toolbar working but it leaves a gap around instead of smooth at the top of the page.

Also I would like it to be sticky but have not yet worked on that part since it doesn't look like my toolbar implementation is a "header". What am I doing wrong or am I using the wrong component?

Toolbar with gaps

<md-toolbar color="primary">
    <i class="material-icons app-toolbar-menu">menu</i>
    <span class="app-toolbar-filler"></span>
    <md-sidenav>
    </md-sidenav>
</md-toolbar>

Upvotes: 6

Views: 10545

Answers (2)

Oliver Ni
Oliver Ni

Reputation: 2662

The accepted other answer seems kind of hacky, since your toolbar isn't really a sidenav. Here's a better way to do it.

In styles.css, set:

body {
    margin: 0;
}

However, this also gets rid of the margins for the rest of the HTML. If you do not want this, wrap the rest of the HTML in a <div> and add a margin to that.

Upvotes: 9

Edric
Edric

Reputation: 26841

Simply place your code inside a md-sidenav-container element and add an attribute fullscreen:

<md-sidenav-container fullscreen>
    <md-toolbar color="primary">
        <i class="material-icons app-toolbar-menu">menu</i>
        <span class="app-toolbar-filler"></span>
        <md-sidenav>
        </md-sidenav>
    </md-toolbar>
</md-sidenav-container>

Plunker Demo

UPDATE: You should use the answer above mine. It doesn't require a sidenav.

Upvotes: 4

Related Questions