CSS avec matériau angulaire

Question

Je suis un débutant à anguleux. Ce que j'ai actuellement est un conteneur sidenav dont le contenu est une barre d'outils mat. Maintenant, ma question est, comme vous pouvez le voir, lorsqu'elle est visualisée avec un bureau de taille normale, la couleur d'arrière-plan de la barre d'outils étirée et remplie sur toute la largeur, alors que lorsqu'elle est visualisée avec un téléphone, la couleur d'arrière-plan n'est pas complètement remplie. une lacune qui n'est pas agréable à regarder.

J'ai essayé de définir la largeur du contenu du tapis sidenav à 100% en pensant que cela prendrait tout l'espace de la largeur

Pour plus d'informations, voici le 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>

et voici le 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%;
}

Merci pour toute aide à l'avance

Answer 1

Vous semblez rencontrer un problème avec vos mat-toolbaréléments débordant de leur espace horizontal. Vous pourrez peut-être apporter des modifications à l'espace occupé par votre logo.

De plus, je vois que dans votre .buttonclasse vous avez ajouté, width: 10px;mais il semble que cela ne soit pas appliqué. Cela s'explique notamment mat-buttonpar un style qui spécifie min-width: 64px;que vous devrez peut-être remplacer si vous souhaitez que vos boutons diminuent en taille.

Si l'approche ci-dessus fonctionne, vous pouvez également ajuster le rembourrage de vos boutons. Ce qui suit peut être utile, mais je n'ai pas pu le tester:

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