ng-select - Change height

Question

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.

score 19 · Accepted Answer · answered Jun 07 '19 at 12:17

19

Override the styles through CSS:

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

.ng-select.ng-select-single .ng-select-container {
  height: 20px;
}

answered Jun 07 '19 at 12:17

Maihan Nijat

9,054
11
62
110

Thanks that worked. How can I use it with my custom class? The reason because I only want to apply this styling just to this page. – sachman Jun 07 '19 at 13:07
@sachman if you want to apply for just one page, then apply to the CSS of the page/ component only. – Maihan Nijat Jun 07 '19 at 13:15
Which style needs to be overridden for a multi select box? I have added the attribute [multiple]="true" and the style .ng-select-multiple .ng-select-container but the box is staying 1 size with the applied styles. – sachman Jun 07 '19 at 14:07
Note that currently there is a defect (I think) in ng-select using this. When you open the select for the first time, the "arrow" moves vertically a bunch of pixels and looks wrong. I opened https://github.com/ng-select/ng-select/issues/2145 to address it. Included in there is a stackblitz with a workaround. You can also see how to apply height changes to mulit-select. – jessewolfe Oct 17 '22 at 22:54

score 1 · Answer 2 · answered Jun 02 '21 at 10:23

1

Use this one:

::ng-deep .ng-select-container {
  height: 5px !important;
  font-size: 0.8em!important;
}

answered Jun 02 '21 at 10:23

Mostafa Saadatnia

802
8
20

score 0 · Answer 3 · answered Nov 05 '21 at 10:35

0

in your style add this:

::ng-deep .ng-select .ng-select-container , ::ng-deep .ng-select.ng-select-single .ng-select-container{
  min-height: 5px;
  font-size: 0.8em;
}

answered Nov 05 '21 at 10:35

alirezacode

116
4

ng-select - Change height

3 Answers3

Linked