mdb-select drop down list length


Topic: mdb-select drop down list length

mdb2 pro asked 6 years ago

How can I set mdb-select drop down list length

Damian Gemza staff answered 6 years ago

Dear mdb2, You can obtain Select's dropdown list by using @ViewChild decorator. Please look at my code: .html:
<div class="row">

<div class="col-md-6 mx-auto my-5">

<mdb-select #select [options]="optionsSelect"placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</div>

<div class="col-md-3 my-5">

<button class="btn btn-primary waves-light"mdbWavesEffect (click)="click()">Click me</button>

</div>

</div>
.ts:
@ViewChild('select') select: SelectComponent;

optionsSelect:Array<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

{ value: '4', label: 'Option 4' },

{ value: '5', label: 'Option 5' },

{ value: '6', label: 'Option 6' },

{ value: '7', label: 'Option 7' },

{ value: '8', label: 'Option 8' },

];

}

click() {

console.log(this.select.options.length);

}
Best Regards, Damian

mdb2 pro answered 6 years ago

Hi, First, I didn't get any email notification although I am subscribed to this ticket. Second, the question was about changing the length of the list because it is too short.

Damian Gemza staff commented 6 years ago

I don't understand your question. How you can change length of dropdown list in Material Select? Simply adding new items to this.optionsSelect array. About notifications: Please subscribe this ticket to watch, and the notifications should arrive to your mailbox. Best Regards, Damian

mdb2 pro commented 6 years ago

I am automatically subscribed to ticket I open yet no emails arrive. The list has many options, let say 20. My question is that currently only 4-5 items are shown in the open list, yet I want the user to see more items, let say 10. How can I do it ?

Damian Gemza staff commented 6 years ago

Dear mdb2, When mdb-select has more than 4 items, his dropdown got a scrollbar to scroll down the whole list, and there's every item which you're having in your items array. Do you see that scrollbar? I'm attaching a screenshot of my actual behavior: https://imgur.com/a/RcqyzTB Best Regards, Damian

mdb2 pro commented 6 years ago

I know there is a scrollbar. I want the use to see more items, without using it

allantra pro commented 6 years ago

Hey Damian, We were also wondering the same thing as mdb2: How can we display more than the default 4-5 items in the dropdown, when the user has opened the list. We have lots of areas in our app where the dropdown list has > 100 options and we would like to show more than 5 options at once in the dropdown: How can we change the number of options that are shown at a time in the dropdown list? If this were regular HTML we could do this: and that would show 10 items in the list at any time... how can we accomplish this in MDB? Thanks

Damian Gemza staff commented 6 years ago

Dear allantra, mdb2 For now, there's no possibility to change the number of items visible at one time in Select dropdown. But I'll add your feature request to our nice-to-have list, and we'll try to implement it in future. Best Regards, Damian

mdb2 pro answered 6 years ago

Ping................

Arkadiusz Idzikowski staff answered 6 years ago

We added new visibleOptions input in version 6.2.5. It allow to specify number of visible options in select dropdown. Check our changelog to learn about the latest changes: Angular changelog Regards, Arek
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No