CSS с угловатым материалом

Question

Я новичок в угловых. В настоящее время у меня есть контейнер sidenav, содержимое которого представляет собой панель инструментов mat. Теперь у меня вопрос, как вы можете видеть, когда он просматривается на полноразмерном рабочем столе, цвет фона панели инструментов растягивается и заполняется по всей ширине, тогда как при просмотре на телефоне цвет фона не заполняется полностью, оставляя какой-то пробел, на который не приятно смотреть.

Я попытался установить ширину содержимого mat sidenav на 100%, думая, что он займет все пространство ширины

Для получения дополнительной информации это 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>

а вот 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%;
}

Спасибо за любую помощь заранее

Answer 1

Кажется, вы столкнулись с проблемой, когда ваши mat-toolbarэлементы выходят за пределы своего горизонтального пространства. Вы можете внести некоторые изменения в пространство, которое занимает ваш логотип.

Кроме того, я вижу, что в вашем .buttonклассе вы добавили, width: 10px;но похоже, что это не применяется. Одна из причин этого заключается в том, что mat-buttonу вас есть стиль, который указывает, min-width: 64px;что вам может потребоваться переопределить, если вы хотите, чтобы ваши кнопки уменьшались в размере.

Если описанный выше подход работает, вы также можете настроить отступ ваших кнопок. Следующее может быть полезным, но я не смог это проверить:

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