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

Это связано с вопросом в 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 multiple - изменить высоту

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

ОБНОВИТЬ

В инструментах разработки я могу изменить минимальную высоту в .ng-select .ng-select-container следующим образом:

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

И мое поле выбора выглядит меньше:

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

Однако добавление того же стиля к стилю моего компонента не улавливает этого:

@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;
        }

  `],
})
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
5 818
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы переопределили .ng-select-container и .ng-select-multiple, что правильно, но вы не переопределили его дочерние элементы.

Несколько флажков выбора имеют дополнительные элементы по сравнению с элементом выбора (кнопка отмены выбора, просмотр выбранных вариантов и т. д.)

Это в

<div class = "ng-value-container">
    <div class = "ng-value>
    ....

Разделы ng-value содержат элементы mendoza и franklin:

Вам необходимо настроить высоту/высоту строки/поля/отступы, определенные в этих дочерних элементах.

Обновлено:

Вам также необходимо уменьшить размер дочерних элементов, прежде чем размер родительского элемента уменьшится. Например. в формате GIF:

Я основываю этот ответ на демонстрации, найденной в ng-select.github.io/ng-select#/мультиселект. Дайте мне знать, если это не сработает

terahertz 08.06.2019 10:56

Спасибо за ответ. У меня возникли проблемы с добавлением стилей для переопределения. Не могли бы вы указать их?

sachman 10.06.2019 11:25

Я добавил GIF, показывающий, как я уменьшил его с помощью инструментов разработчика Chrome. В будущем будет лучше/более эффективно, если вы будете методом проб и ошибок использовать инструменты разработчика, а не угадывать имена классов или свойства css и ждать 2-3 секунды на обновление.

terahertz 10.06.2019 14:42

Спасибо тебе за это. И я уже пытался использовать метод проб и ошибок, зайдя в инструменты разработчика, но не смог получить то, что хотел.

sachman 10.06.2019 14:55

Поэтому я использовал инструменты разработчика, если я изменяю свойство min-height в .ng-select .ng-select-container, оно работает, но если я указываю это в своей таблице стилей, оно не подхватывается. Любая идея, почему это так? Я включил это в свой первоначальный вопрос.

sachman 10.06.2019 17:33

Вероятно, вам нужно добавить :host ::ng-deep перед вашими селекторами CSS. Я уже задавал аналогичный вопрос... stackoverflow.com/questions/53717527/…

terahertz 11.06.2019 03:50

Другие вопросы по теме