title: ng-select - Change height
body: <p>I am using the ng-select library <a href="https://github.com/ng-select/" rel="noreferrer">https://github.com/ng-select/</a> 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 <a href="https://github.com/ng-select/ng-select#custom-styles" rel="noreferrer">https://github.com/ng-select/ng-select#custom-styles</a> but cannot get it to work.</p>
  
  <p>I have added a customized CCS with an attempt to do this.</p>
  
  <p>Here is my code of the ng-select</p>
  
  <pre><code>                &lt;label class="col-sm-4 text-sm-right col-form-label"&gt;Payout Format&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;ng-select
                          [items]="payoutFormats"
                          [closeOnSelect]="true"
                          [searchable]="true"
                          bindValue="payoutBatchFormatID"
                          bindLabel="name"
                          placeholder="All"
                          [(ngModel)]="filter.payoutFormats"
                          name="payoutFormat"
                          class="custom"&gt;
                      &lt;/ng-select&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS I have added to customize it:</p>
  
  <pre><code>.ng-select.custom {
      height:5px;
      font-size: 0.8em;
  }
  
  .ng-select.custom .ng-select-container  {
      height:5px;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is how my select looks like after the CSS:
  <a href="https://i.stack.imgur.com/Q2C81.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q2C81.png" alt="enter image description here"></a></p>
  
  <p>I need it to be smaller.</p>