CSS z materiałem kątowym

Question

Jestem początkującym w kątowym. Obecnie posiadam kontener sidenav z zawartością w postaci paska narzędzi mat. Teraz moje pytanie brzmi, jak widać, kiedy jest wyświetlany na pełnowymiarowym pulpicie, kolor tła paska narzędzi rozciągnął się i wypełniał całą szerokość, podczas gdy podczas oglądania za pomocą telefonu kolor tła nie jest wypełniony całkowicie, pozostawiając jakaś luka, na którą nie jest przyjemnie patrzeć.

Próbowałem ustawić szerokość zawartości mat sidenav na 100%, myśląc, że zajmie to całą przestrzeń szerokości

Więcej informacji można znaleźć w pliku 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>

a tu jest 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%;
}

Z góry dziękuję za wszelką pomoc

Answer 1

Wygląda na to, że masz problem z mat-toolbarprzepełnieniem elementów przez ich poziomą przestrzeń. Możesz być w stanie dostosować miejsce, które zajmuje Twoje logo.

Widzę również, że w twojej .buttonklasie dodałeś, width: 10px;ale wygląda na to, że nie jest to stosowane. Jednym z powodów tego jest mat-buttonstyl, który określa min-width: 64px;, że może być konieczne zastąpienie, jeśli chcesz, aby przyciski zostały zmniejszone.

Jeśli powyższe podejście działa, możesz również dostosować wypełnienie przycisków. Poniższe mogą być pomocne, ale nie byłem w stanie tego przetestować:

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