Change bootstrap-select width

Question

I am using angular 7 and created a selectDirective for handling bootstrap-select instantiation in the application.

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

In my html of the component (where I use the directive):

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

and the scss for the same is

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

Now when I check the component, it is still using the default width of 220px provided in bootstrap-select then 275px provided, however the inner select gets 275px width. It seems that bootstrap-select isn't taking my nested scss in consideration while creating the structure for it's component.

How I can make it work ?

Answer 1

I think your select is nested inside many tag of you template so you need to use deep to target deep nesting element in css

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