CODEWITHSUNDEEP
angularjsangular-ui-bootstrapng-dropdown-multiselect
Valla
Valla

Reputation: 2442

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

Upvotes: 7

Views: 11939

Answers (3)

TAHA SULTAN TEMURI
TAHA SULTAN TEMURI

Reputation: 5281

You don't have to do anything instead you just have to increase

itemsShowLimit

Property value like

 this.dropdownSettings = {
    singleSelection: false,
    idField: 'item_id',
    textField: 'item_text',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 100,
    allowSearchFilter: true
  };

Upvotes: 0

Juan Ignacio Barisich
Juan Ignacio Barisich

Reputation: 2170

This CSS works for me:

.multiselect-parent {
  width: 100%;
}

.multiselect-parent .dropdown-toggle {
  width: 100%;
}

.multiselect-parent .dropdown-menu {
  width: 100%;
}

Upvotes: 2

Suneet Bansal
Suneet Bansal

Reputation: 2702

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

Upvotes: 10

Related Questions