Это связано с вопросом в 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-multiple, когда включено несколько, не влияет на высоту.
Вот как мой выбор выглядит после 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;
}
`],
})






Вы переопределили .ng-select-container и .ng-select-multiple, что правильно, но вы не переопределили его дочерние элементы.
Несколько флажков выбора имеют дополнительные элементы по сравнению с элементом выбора (кнопка отмены выбора, просмотр выбранных вариантов и т. д.)
Это в
<div class = "ng-value-container">
<div class = "ng-value>
....
Разделы ng-value содержат элементы mendoza и franklin:
Вам необходимо настроить высоту/высоту строки/поля/отступы, определенные в этих дочерних элементах.
Обновлено:
Вам также необходимо уменьшить размер дочерних элементов, прежде чем размер родительского элемента уменьшится. Например. в формате GIF:
Спасибо за ответ. У меня возникли проблемы с добавлением стилей для переопределения. Не могли бы вы указать их?
Я добавил GIF, показывающий, как я уменьшил его с помощью инструментов разработчика Chrome. В будущем будет лучше/более эффективно, если вы будете методом проб и ошибок использовать инструменты разработчика, а не угадывать имена классов или свойства css и ждать 2-3 секунды на обновление.
Спасибо тебе за это. И я уже пытался использовать метод проб и ошибок, зайдя в инструменты разработчика, но не смог получить то, что хотел.
Поэтому я использовал инструменты разработчика, если я изменяю свойство min-height в .ng-select .ng-select-container, оно работает, но если я указываю это в своей таблице стилей, оно не подхватывается. Любая идея, почему это так? Я включил это в свой первоначальный вопрос.
Вероятно, вам нужно добавить :host ::ng-deep перед вашими селекторами CSS. Я уже задавал аналогичный вопрос... stackoverflow.com/questions/53717527/…
Я основываю этот ответ на демонстрации, найденной в ng-select.github.io/ng-select#/мультиселект. Дайте мне знать, если это не сработает