I have created a multi select dropdown using AngularJS and bootstrap and in the pages I include the following code:
<div class="row">
<div class="col-lg-6">
<label>Standards</label>
<ng-dropdown-multiselect
options="dashboard.example1data"
selected-model="dashboard.example1model"
style="max-width: 500px;">
</ng-dropdown-multiselect>
</div>
</div>
I am trying to increase the width of the dropdown and I am not sure how I can achieve that. Could someone let me know how we can increase the width of "ng-dropdown-multiselect".
Multi select dropdown list is used when a user wants to store multiple values for the same record, whereas dropdown list is used to store a single value for a record. You can create custom categories of either dropdown list or multi select dropdown list and define items in each category.
Install the Angular CLI application in your machine. Now create a new Angular project by using the command `ng new` and navigate to that folder. Install the ej2-angular-dropdowns package through the npm install command. You can add the Angular 6 MultiSelect Dropdown component by using the `ejs-multiselect` directive.
You will have to override the CSS which is used to make the button with drop down.
Put the below CSS either inside the <script></script>
or in some external CSS file which gets loaded before your html file.
.multiselect-parent .dropdown-toggle {
width: 400px;
}
.multiselect-parent .dropdown-menu {
width: 300px;
}
This would solve your issue.
Cheers!!!
This CSS works for me:
.multiselect-parent {
width: 100%;
}
.multiselect-parent .dropdown-toggle {
width: 100%;
}
.multiselect-parent .dropdown-menu {
width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With