Изменить ширину выбора начальной загрузки

Я использую angular 7 и создал selectDirective для обработки создания экземпляра bootstrap-select в приложении.

ngOnInit() {
  // wrapping in setTimeout to delay init until after attribute binding
  jQuery(this.el).selectpicker({
    iconBase: 'fa',
    tickIcon: 'fa-check'
  });
}

В моем html компонента (где я использую директиву):

<div id = "filters">
  <select selectDirective
          class = "status-filter show-tick"
          multiple = "multiple"
          title = "select filter">
    <option>abc</option>
    <option>def</option>
  </select>
</div>

и scss для того же

#filters {
  .status-filter {
    width:275px !important;
  }
}

Теперь, когда я проверяю компонент, он по-прежнему использует ширину по умолчанию 220 пикселей, указанную в bootstrap-select, а затем 275 пикселей, однако внутренний выбор получает ширину 275 пикселей. Кажется, что bootstrap-select не учитывает мой вложенный scss при создании структуры для его компонента.

Как я могу заставить его работать?

🤔 А знаете ли вы, что...
JavaScript был первоначально создан для улучшения интерактивности веб-страниц.


626
1

Ответ:

Решено

Я думаю, что ваш выбор вложен во многие теги вашего шаблона, поэтому вам нужно использовать deep для целевого элемента глубокого вложения в css.

/deep/ #filters{
 .status-filter{
        width:275px!important;
 }
}