ng-select - изменить высоту

Question

Я использую библиотеку ng-select https://github.com/ng-select/ для Angular 5 в версии 1.4.2. Я хочу настроить его так, чтобы высота ng-select была меньше. Как этого достичь? Я посмотрел на настройку со стилями на https://github.com/ng-select/ng-select#custom-styles, но не могу заставить его работать.

Я добавил настроенную CCS, пытаясь это сделать.

Вот мой код ng-select

                <label class="col-sm-4 text-sm-right col-form-label">Payout Format</label>
                <div class="col-sm-8">
                    <ng-select
                        [items]="payoutFormats"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindValue="payoutBatchFormatID"
                        bindLabel="name"
                        placeholder="All"
                        [(ngModel)]="filter.payoutFormats"
                        name="payoutFormat"
                        class="custom">
                    </ng-select>
                </div>

Вот CSS, который я добавил, чтобы настроить его:

.ng-select.custom {
    height:5px;
    font-size: 0.8em;
}

.ng-select.custom .ng-select-container  {
    height:5px;
}

Как видно, я пытался установить высоту в 2 местах, но это не дает никакого эффекта Мне удалось успешно изменить размер шрифта.

Вот как выглядит мой выбор после CSS:

Мне нужно, чтобы он был меньше.

Answer 1

Переопределить стили с помощью CSS:

.ng-select .ng-select-container {
  min-height: 20px;
}

.ng-select.ng-select-single .ng-select-container {
  height: 20px;
}