Ng-select: Giving input box a "small" style

[gitlines]

I am trying to decrease the style of the select box to match the Bootstrap 4 "custom-select-sm" style.
I have tried all morning to affect the height using the suggested way via

.ng-select.custom { height: 20px; } .ng-select.custom .ng-control { height: 20px; }

and by adding

<ng-select class="custom"></ng-select>

to my html, but the only thing I am able to affect are font sizes and the line-height once the select dropdown pops up. However, I fail to decrease the height of the actual box (increasing the box size works via line-height, e.g. line-height; 80px; )

Does anyone have a solution or an idea what I am missing?

[varnastadeus]

just override both, height and min-height

.ng-select.custom .ng-control {
  min-height: 20px;
  height: 20px;
}

[gitlines]

Thanks for your response. Your suggestion does not work though. Here is my code:

In my html:

    <div class="form-group col-md-6">
      <label>Core(s)</label>
      <ng-select class="custom"
      [items]="host.cores" 
      [multiple]="true"
      [closeOnSelect]="false"
      [virtualScroll]="true" 
      [dropdownPosition]="'top'"
      placeholder="Select core(s)"
      formControlName="cpuCores">
      </ng-select>
    </div>

In the component's scss

.ng-select.custom .ng-control {
  min-height: 20px;
  height: 20px;
}

[varnastadeus]

@gitlines it does https://stackblitz.com/edit/angular-ng-select-tad-rttcv5

[gitlines]

Thank you, I got it now. Problem was that I placed the custom css in the component's scss file not in the application wide styles.scss. Putting the code there does have the desired effect :)