Это связано с вопросом на ng-select - Изменить высоту .Я хочу сделать то же самое, но с помощью ng-select, который позволяет выбрать несколько элементов.
Вот мой код 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"
[multiple]="true"
[closeOnSelect]="true"
[searchable]="true"
bindValue="payoutBatchFormatID"
bindLabel="name"
placeholder="All"
[(ngModel)]="filter.payoutFormats"
name="payoutFormats">
</ng-select>
</div>
В свой компонент я добавил следующие стили:
@Component({
templateUrl: './test.component.html',
styles: [`
.ng-select{
font-size:0.85em;
}
.ng-select .ng-select-container {
min-height: 3px;
}
.ng-select.ng-select-multiple .ng-select-container {
height: 3px;
}
`],
})
Мне удалось получить эторабота с не множественным полем выбора с помощью
.ng-select.ng-select-single .ng-select-container {
height: 20px;
}
Но изменение его с .ng-select.ng-select-single на .ng-select.ng-select-multip, когда множественное включено, не имеет никакого эффектана высоте.
Вот как выглядит мой выбор после CSS:
Мне нужно, чтобы он был меньше.
ОБНОВЛЕНИЕ
В инструментах разработчика я могу изменить минимальную высоту в .ng-select .ng-select-container следующим образом:
И мое поле выбора выглядит меньше:
Однако добавление того же стиля к стилю моего компонента делаетне забрать это:
@Component({
templateUrl: './list-exceptions-handling-payments.component.html',
styles: [`
.ng-select{
font-size:0.85em;
}
.ng-select .ng-select-container{
min-height: 3px;
}
.ng-select.ng-select-multiple .ng-select-container {
height: 3px;
}
`],
})