CSS with angular material

Question

I am a beginner to angular. What i have currently is a sidenav container with the content being a mat toolbar. Now my question is, as you can see, when it's viewed with a full sized desktop, the background colour of the toolbar stretched and filled the entire width, whereas when it's viewed with a phone, the background colour is not filled all the way leaving some gap that's not pleasant to look at.

I have tried setting mat sidenav content width to be 100% thinking that it would take up the entire space of the width

For further information, this is the html.

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer
                 class="sidenav"
                 fixedInViewport
                 [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
                 [mode]="(isHandset$ | async) ? 'over' : 'side'"
                 [opened]="false">
        <mat-toolbar>
            <button mat-button
                    (click)="drawer.close()">
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar>
        <mat-nav-list>
            <a mat-list-item
               routerLink="/"
               (click)="drawer.close()">Home</a>
            <a mat-list-item
               routerLink="/products"
               (click)="drawer.close()">Products</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar>
            <button type="button"
                    aria-label="Toggle Sidenav"
                    mat-icon-button
                    (click)="drawer.toggle()">
                <mat-icon aria-label="Side nav toggle Icon">menu</mat-icon>
            </button>
            <span class="logo"
                  routerLink="/">
                <img class="ww-logo"
                     src="assets/images/WWtrans.png" />
            </span>
            <div>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Search for a product"
                              svgIcon="search"></mat-icon>
                </button>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Login if the user hasn't logged in yet"
                              svgIcon="login"></mat-icon>
                </button>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Show what's inside the cart"
                              svgIcon="shopping-cart"></mat-icon>
                </button>
            </div>
        </mat-toolbar>
    </mat-sidenav-content>
</mat-sidenav-container>

and here is the css

.logo {
    display: flex;
    margin: auto auto;
    outline: none;
    align-self: center;
    justify-content: center;
    align-self: center;
    min-width: 100px;
    max-width: 100px;

    .ww-logo {
        width: 60%;
        cursor: pointer;
    }
}

.button {
    border: 1px solid red;
    width: 10px;
}

.sidenav-container {
    height: 100%;
    width: 100%;
}

mat-sidenav-content {
    width: 100%;
}

Thank you for any help in advance

Answer 1

You seem to be running into an issue with your mat-toolbar elements overflowing their horizontal space. You may be able to make some adjustments to the space your logo is taking up.

Also, I see that in your .button class you have added width: 10px; however it looks like this is not being applied. One reason for this is that mat-button comes with a style that specifies min-width: 64px; that you may need to override if you would like your buttons to scale down in size.

If the above approach works, you may also want to adjust the padding of your buttons as well. The following may be helpful, but I was not able to actually test it:

.button {
    border: 1px solid red;
    min-width: 32px !important;
    padding: 2px !important;
}