ng-select - Change height

I am using the ng-select library https://github.com/ng-select/ for Angular 5 at version 1.4.2. I want to customize it so the height of the ng-select is smaller. How can this be achieved? I have had a look at customizing with styles at https://github.com/ng-select/ng-select#custom-styles but cannot get it to work.

I have added a customized CCS with an attempt to do this.

Here is my code of the 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"
[closeOnSelect]="true"
[searchable]="true"
bindValue="payoutBatchFormatID"
bindLabel="name"
placeholder="All"
[(ngModel)]="filter.payoutFormats"
name="payoutFormat"
class="custom">
</ng-select>
</div>


Here is the CSS I have added to customize it:

.ng-select.custom {
height:5px;
font-size: 0.8em;
}

.ng-select.custom .ng-select-container {
height:5px;
}


As can be seen, I have tried setting the height in 2 places but it has no effect. I was able to change the font size successfully.

Here is how my select looks like after the CSS:

I need it to be smaller.

Continue reading...