[Angular ng-multiselect-dropdown]: Avoid coming of selected values with space in next line

Question

Scenario:

I am using ng-multiselect-dropdown in Angular and i have below code.

in .ts file
this.employee_list = [
      { Id: 1, Value: 'Europe' },
      { Id: 2, Value: 'Employee Name' },
      { Id: 3, Value: 'Employee Address' },
      { Id: 4, Value: 'Employee LastName' }
    ];

this.dropdownSettings = {
      idField: 'Id',
      textField: 'Value',
      itemsShowLimit: 3
    };


in html code:

<div class="col-md-4">
                    <label for="employee">Choose a Employee details</label>
                    <ng-multiselect-dropdown
                        [settings]="dropdownSettings"
                        [data]="employee_list">
                    </ng-multiselect-dropdown>
</div>

When i am trying to select any values with large length with spaces , the selected values are displayed in multiple lines even with space available. Instead need it in single line with overflown values as .... and if possible on hovering the values should be displayed

Set the width for option in css – Vega Jun 25 '22 at 15:33 — Vega, Jun 25 '22 at 15:33

score 0 · Answer 1 · answered Jun 25 '22 at 14:15

0

Its a style issue. try to play around CSS

   <ng-multiselect-dropdown
        style = "white-space: normal;"
        [settings] = "dropdownSettings"
        [data] = "employee_list" >
    </ng-multiselect-dropdown >

answered Jun 25 '22 at 14:15

RED.Skull

1,696
3
24
49

RED.Skull, Thank u for the response. Still getting the same issue. – Rahul Jun 25 '22 at 14:33
@Rahul Try this https://ng-multiselect-dropdown-8ktdtf.stackblitz.io – RED.Skull Jun 25 '22 at 15:39

Rahul · Answer 2 · 2022-06-25T18:20:59.500

in style.css

.custom-font-size .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item  {
    max-width: 700px !important;
}

in html

<ng-multiselect-dropdown class="custom-font-size"
                        [settings]="dropdownSettings"
                        [data]="employee_list">
                    </ng-multiselect-dropdown>

Above code worked for me. you can set max width according to your requirement.

Reference:set width of ng-multiselect-dropdown

[Angular ng-multiselect-dropdown]: Avoid coming of selected values with space in next line

2 Answers2