Köşeli malzemeli CSS

Question

Ben açılıya yeni başlayan biriyim. Şu anda sahip olduğum şey, içeriği bir mat araç çubuğu olan bir sidenav konteyneri. Şimdi sorum şu, tam boyutlu bir masaüstüyle görüntülendiğinde, araç çubuğunun arka plan rengi genişledi ve tüm genişliği doldurdu, oysa bir telefonla görüntülendiğinde arka plan rengi tamamen dolu değil. bakması hoş olmayan bazı boşluklar.

Genişliğin tüm alanını kaplayacağını düşünerek mat sidenav içerik genişliğini% 100 olarak ayarlamayı denedim.

Daha fazla bilgi için bu html'dir.

<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>

ve işte 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%;
}

Şimdiden herhangi bir yardım için teşekkür ederim

Answer 1

mat-toolbarGörünüşe göre, öğelerinizin yatay alanlarından taşmasıyla ilgili bir sorunla karşılaşıyorsunuz . Logonuzun kapladığı alanda bazı ayarlamalar yapabilirsiniz.

Ayrıca, .buttonsınıfınızda eklediğinizi görüyorum width: 10px;ancak bu uygulanmıyor gibi görünüyor. Bunun bir nedeni , düğmelerinizin boyutunun küçültülmesini istiyorsanız geçersiz kılmanız gerekebileceğini mat-buttonbelirten bir stille min-width: 64px;gelmesidir.

Yukarıdaki yaklaşım işe yararsa, düğmelerinizin dolgusunu da ayarlamak isteyebilirsiniz. Aşağıdakiler yardımcı olabilir, ancak gerçekten test edemedim:

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