ng-select multiple - Change height

Question

This is related to the question at ng-select - Change height . I want to do the exact same but with a ng-select that enables multiple items to be selected.

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"
                        [multiple]="true"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindValue="payoutBatchFormatID"
                        bindLabel="name"
                        placeholder="All"
                        [(ngModel)]="filter.payoutFormats"
                        name="payoutFormats">
                    </ng-select>
                </div>

In my component I have added the following styles:

@Component({
    templateUrl: './test.component.html',
    styles: [`
        .ng-select{
            font-size:0.85em;
        }

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

        .ng-select.ng-select-multiple .ng-select-container {
            height: 3px;
        }
  `],
})

I was able to get this working with a non multiple select box by using

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

But changing it from .ng-select.ng-select-single to .ng-select.ng-select-multiple when multiple is enabled has no effect on the height.

Here is how my select looks like after the CSS:

I need it to be smaller.

UPDATE

In dev tools I can change min-height in .ng-select .ng-select-container as follows:

And my select box appears smaller:

However adding the same style to my component styling does not pick this up:

@Component({
    templateUrl: './list-exceptions-handling-payments.component.html',
    styles: [`
        .ng-select{
            font-size:0.85em;
        }

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


        .ng-select.ng-select-multiple .ng-select-container {
            height: 3px;
        }

  `],
})

terahertz · Accepted Answer · 2019-06-10T12:41:03.137

4

You have overriden .ng-select-container and .ng-select-multiple which is correct but you hadn't overriden it's children elements.

Multiple select checkboxes have additional elements compared to select element (deselect button, view selected choices, etc)

These are in

<div class="ng-value-container">
    <div class="ng-value>
    ....

ng-value divs contain mendoza and franklin elements:

You need to adjust the height/line-height/margin/padding defined in these children elements.

EDIT:

You need to make your child elements smaller also before the parent element will decrease in size. E.g. in GIF:

edited Jun 10 '19 at 12:41

answered Jun 08 '19 at 08:55

terahertz

2,915
1
21
33

I am basing this answer using the demo found in https://ng-select.github.io/ng-select#/multiselect. Let me know if it doesn't work – terahertz Jun 08 '19 at 08:56
Thanks for the reponse. I am having a bit of trouble adding the styles to override. Would you please be able to specify them? – sachman Jun 10 '19 at 09:25
I have added a GIF showing how I I made it smaller using chrome developer tools. In future, it is better/more efficient if you trial-and-error using developer tools rather than guessing class names or css properties and waiting 2-3 seconds per refresh. – terahertz Jun 10 '19 at 12:42
Thank you for that. And I already did try to use the trial and error method by going in developer tools but could not get what I wanted. – sachman Jun 10 '19 at 12:55
So I used dev tools if I change the min-height property in .ng-select .ng-select-container it works but if I specify this in my stylesheet it is not getting picked up. Any idea why that is? I have included this in my original question. – sachman Jun 10 '19 at 15:33
You probably need to add `:host ::ng-deep` in-front of your css selectors. I had asked a similar question before... https://stackoverflow.com/questions/53717527/angular-how-to-change-an-imported-components-class-to-change-color – terahertz Jun 11 '19 at 01:50

score 0 · Answer 2 · answered Mar 01 '23 at 09:55

In case you also ran into this questions for the reason that a multi select box is higher than a normal select box that can be fixed as follows ( we only do the top padding if there are actual selected items in there

.ng-select.ng-select-multiple .ng-select-container .ng-value-container{
  padding-top:0;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container:has(div.ng-value){
  padding-top:5px;
}

ng-select multiple - Change height

2 Answers2