Угловой 5,2 компонент материала, как удалить лишние пробелы - PullRequest
0 голосов
/ 03 мая 2018

Я построил свое первое угловое приложение, но пока не повезло, чтобы лучше контролировать пространство, используемое некоторыми компонентами материала.

  1. mat-tab-label, что слишком широко, я следовал этому: Угловой 2 материала, размер md-tab и иметь CSS:

    ::ng-deep .mat-tab-label, ng-deep .mat-tab-label-active{
        min-width: 60px!important;
        padding: 0px 15px 0px 15px !important;
        margin: 0px 3px 0px 3px !important;
        font-size:12px;
    }
    

Я могу лучше контролировать ширину, но она все еще слишком высокая. Можно ли изменить высоту вкладки-надписи?

  1. Поле mat mat, с полем ввода и автозаполнением. Пока не удалось изменить общую высоту поля.

    <div class="mysymbolform">
        <mat-form-field class="symbolbox">
        <input class="inputbox" matInput placeholder="enter" 
              value="Enter" [(ngModel)]="value"
              #box autofocus (keyup.enter)="onEnter(box.value)" 
              [matAutocomplete]="auto" [formControl]="formCtrl">
              <mat-autocomplete  #auto="matAutocomplete">
                <mat-option *ngFor="let result of filteredResult | async"
                      [value]="result.title" >
    
                </mat-option>
    
    
            </mat-autocomplete>
        </mat-form-field>
     </div>
    

высота которого как минимум вдвое больше обычного поля ввода HTML.

  1. mat-accordion, mat-expansion-panel-header, когда он находится в режиме расширения, тоже слишком высокий:

    ::ng-deep .mat-expansion-panel-header  {
         padding: 0px 10px 0px 10px;
         height:32px !important;
    }
    

Большое спасибо! (И, пожалуйста, скажите мне, если есть лучшие способы сжать пространство всех компонентов материала.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...