Valla Valla - 5 months ago 308
AngularJS Question

How can I increase the width of ng-dropdown-multiselect created using bootstrap AngularJs

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".

Answer

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!!!

Comments