About mdb-select

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: About mdb-select

carlosalviz 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)    ??

Sebastian Kaczmarek staff pro premium answered 6 years ago

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 commented 6 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 pro premium commented 6 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

carlosalviz answered 6 years ago

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 pro premium commented 6 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.

Arkadiusz Idzikowski staff answered 6 years ago

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 commented 6 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 6 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 commented 6 years ago

great!  hadnt noticed that API section... tks!
Write
Create snippet
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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: chrome
  • OS: windows10
  • Provided sample code: No
  • Provided link: No
Tags
bootstrap mdbselect-issues
Related topics
2
Bootstrap 5 Organization chart plugin data documentation
2
Sketch version MDB
1
Multiselect not working for jquery/bootstrap
1
Changing gutter spacing for Bootstrap
1
ABP IO integration
About author
carlosalviz
165Support score
7Questions 13Answers
0Snippets likes 0Snippets