About mdb-select

Topic: About mdb-select

carlosalviz free asked 6 years ago

Hello!, need your help with a mdb-select -multiple- implementation.

1. Is there a way to expand it by default?

2. I'm using this inside a mdb-accordion object. Once I click on the Select object, it opens fine but some of the values get hidden by the next accordion.

Need them (all values) be visible. It should move down the objects located below to this... Please help.

Tks

Btw. I just bought the PRO Angular MDB version some weeks ago, and it said I was going to have a PREMIUM SUPPORT by a year. (but it looks like I dont have that) ??

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear carlosalviz,

1. You need to add template reference variable to the mdb-select and then use ViewChild decorator to get access to the select methods inside your component. Here is an example:

HTML:

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

TS:

@ViewChild('select) select: SelectComponent;

And then you can use this.select.open() method inside ngAfterViewInit hook.

2. We are already aware of this problem, but unfortunately I can't provide an easy workaround. We will have to change the way the dropdowns are displayed.

Regards,

Arek

carlosalviz free commented 5 years ago

Hi Arek, Tks for your information.

This support had a partial solution to the issue: https://mdbootstrap.com/support/angular/mdb-select-inside-mdb-accordion-doesn-t-work/

I'll work with that.

Another question... doesnt exits the Searchable option for the Angular mdb-select? (dont find it in the documentation... just for jquery)

Arkadiusz Idzikowski staff commented 5 years ago

You can find more information about component in the API section (you need to change tab at the top of the select documentation). The input you are looking for is called 'filterEnabled'. Just add [filterEnabled]="true" to your mdb-select.

carlosalviz free commented 5 years ago

great! hadnt noticed that API section... tks!

Add comment

carlosalviz free answered 5 years ago

0 0 Best answer

<p>Hi Sebastian...</p><p>Yes, of course...  I checked your code, and that-s where I got confused.</p><p>And I think I found where is the mess...  I-m using ANGULAR. And that code looks like for JQuery. Isnt it?</p><p> I just copied the code you have for the Accordion (https://mdbootstrap.com/docs/angular/advanced/accordion/) and added it 1 select and it doesnt work. I-m adding the code, so maybe you can check with that.</p><div><br /><div><mdb-accordion [multiple]="true"></div><div><mdb-accordion-item [collapsed]="false"></div><div><mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head></div><div><mdb-accordion-item-body></div><div>Anim pariatur cliche reprehenderit, ....</div><div></mdb-accordion-item-body></div><div></mdb-accordion-item></div><div> </div><div><mdb-accordion-item></div><div><mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head></div><div><mdb-accordion-item-body></div><div><mdb-select id="listaCaract" [multiple]="true" [(ngModel)]="selectedproperties" searchable="Search here.."</div><div>[options]="properties" placeholder="Caracteristicas"></mdb-select></div><div></mdb-accordion-item-body></div><div></mdb-accordion-item></div><div> </div><div><mdb-accordion-item></div><div><mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head></div><div><mdb-accordion-item-body></div><div>Anim pariatur cliche reprehenderit, ...</div><div></mdb-accordion-item-body></div><div></mdb-accordion-item></div><div></mdb-accordion></div></div><p>tks again...</p><p> </p><p> </p>

Please insert min. 20 characters.

Hi Sebastian...

Yes, of course... I checked your code, and that-s where I got confused.

And I think I found where is the mess... I-m using ANGULAR. And that code looks like for JQuery. Isnt it?

I just copied the code you have for the Accordion (https://mdbootstrap.com/docs/angular/advanced/accordion/) and added it 1 select and it doesnt work. I-m adding the code, so maybe you can check with that.

<mdb-accordion [multiple]="true">

<mdb-accordion-item [collapsed]="false">

<mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>

<mdb-accordion-item-body>

Anim pariatur cliche reprehenderit, ....

</mdb-accordion-item-body>

</mdb-accordion-item>

<mdb-accordion-item>

<mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<mdb-select id="listaCaract" [multiple]="true" [(ngModel)]="selectedproperties" searchable="Search here.."

[options]="properties" placeholder="Caracteristicas"></mdb-select>

</mdb-accordion-item-body>

</mdb-accordion-item>

<mdb-accordion-item>

<mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>

<mdb-accordion-item-body>

Anim pariatur cliche reprehenderit, ...

</mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

tks again...

Sebastian Kaczmarek staff commented 5 years ago

Ahh, I see, I got confused since you have added this question to the "General" category. I'm redirecting this to the Angular team.

Add comment

Sebastian Kaczmarek staff answered 5 years ago

0 0 Best answer

1. Currently, there is no such option.

2. I can't reproduce this issue. Please take a look at my snippet here. Is that what you want to achieve?

3. You have the "premium" badge right next to your nickname and your tickets have the highest priority so it's all fine.

carlosalviz free commented 5 years ago

Hi Sebastian,

tks for your answer.... yes that-s what I am trying to do.

Could you please show me that code using the MDB code? (instead the basic html?)

I know that looks easy... but dont know why I dont get the expected behavior.

Sebastian Kaczmarek staff commented 5 years ago

@carlosalviz Have you took a look at my snippet? There you can find the MDB code and you can check if you have the same one

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: PC
Browser: chrome
OS: windows10
Provided sample code: No
Provided link: No

carlosalviz

165Support score
7Questions 13Answers 0Snippets