angular-2-dropdown-multiselect - Customize width 100%

Question

I'm implementing this angular-2-dropdown-multiselect component:

https://www.npmjs.com/package/angular-2-dropdown-multiselect

The component work properly but I need to set its with fit to the container...

I think that I just have to add "width:100%" somewhere but I don't know where I have to do it.

Another consideration:

The component is implemented in a Bootstrap application.

I have put the component inside a table like:

<table class="table">
<tr>
    <td>Search</td>
    <td><ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel" [ngModelOptions]="{standalone: true}"></ss-multiselect-dropdown></td>
</tr>
</table>

Consideration:

May be that considering switching from bootstrap table to a bootstrap form should render the listbox fit to container by default...

Thanks to support

RAHUL KUMAR · Accepted Answer · 2017-12-26 06:10:53Z

3

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
></angular2-multiselect>

maxHeight:100 You can set the maxHeight of drop down in settings in your respective component ts file

this.dropdownSettings = { singleSelection: false, text: "Select Users", selectAllText: 'Select All', unSelectAllText: 'UnSelect All', enableSearchFilter: true, classes: "myclass custom-class", maxHeight:150 };

https://www.npmjs.com/package/angular2-multiselect-dropdown

answered Dec 26, 2017 at 6:10

RAHUL KUMAR

1,19311 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bchampion · Accepted Answer · 2017-05-13 09:52:34Z

1

I don't know what you want to set its width. Is it the button or the dropdown menu?

Anyway, you can set the width in the parent component's css file like this :

For the button :

ss-multiselect-dropdown > div.btn-group {
  width: 100%;
}

For the dropdown menu :

ss-multiselect-dropdown > div.btn-group > ul.dropdown-menu {
  width: 100%;
}

If it doesn't work, you may need to use deep styling like this :

:host >>> ss-multiselect-dropdown > div.btn-group {
 width: 100%;
}

:host >>> ss-multiselect-dropdown > div.btn-group > ul.dropdown-menu {
  width: 100%;
}

You should have a look at the Component Styles page of Angular.io

answered May 13, 2017 at 9:52

bchampion

2012 silver badges11 bronze badges

Comments

gkizior · Accepted Answer · 2018-06-15 14:58:44Z

0

You can also use 'colspan'

<table class="table">
   <tr>
      <td>Search</td>
      <td colspan="#ofColumnsToSpan"><ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel" [ngModelOptions]="{standalone: true}"></ss-multiselect-dropdown></td>
   </tr>
</table>

answered Jun 15, 2018 at 14:58

gkizior

288 bronze badges

Comments

Haamza · Accepted Answer · 2024-11-11 08:09:11Z

0

In the latest versions, dropdown-multi select automatically add 300px as a default height. But you can customize with this class

::ng-deep .dropdown-list .list-area div[style*="overflow: auto"] {
  max-height: 9rem !important;
}

answered Nov 11, 2024 at 8:09

Haamza

14 bronze badges

Collectives™ on Stack Overflow

angular-2-dropdown-multiselect - Customize width 100%

Consideration:

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Consideration:

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related