1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Bootstrap select

rl pro asked 6 years ago

I'd like to use the MDB select (https://mdbootstrap.com/angular/advanced/material-select/), but there are two small issues which would be nice if could be solved:
- the placeholder text is not shown above the options when options are open. Yes, this is not so important, but it looks a little bit better :-)
- select, shown at https://mdbootstrap.com/angular/advanced/material-select/, reflects the visibility of open options - I mean should some option not be visible, the options window opens up. The MDB Angular select does not do that.
Any chance to fix it? Or am I doing something wrong?

Radek

Adrian Sawicki free answered 6 years ago

Yes, I've added it too. I'm not sure if you're interested in getting into mdb code and changing something there. But if you want to use only selects with all options visible then you can change dropdown-content class to your personal wish.

Adrian Sawicki free answered 6 years ago

I'm adding it to our to-do list. For now, the only solution that I can suggest is to use { value: '', label: 'placeholder', group: true }, it will seem almost as a placeholder.

rl pro commented 6 years ago

Hi, thanx for hint, I've done something similar. But I was not able to find any workaround for the other issue, I mean opening the options and assure that they are all visible. Hopefully you added this to your to-do list as well :-)

Adrian Sawicki free answered 6 years ago

Hello, Could you explain more precisely, what effect would you want to attain? I guess I'm kinda not getting everything that you've just written.

rl pro commented 6 years ago

Hi, ok, I have tried to make some snapshots :-) Pls. check http://lucan.cz/mdb/mdb-select-default.png - this is the jquery mdb select, with placeholder text above the options and the options box is show so that all the options are visible even if the box was opened by the bottom of the viewport and compare it with angular mdb select http://lucan.cz/mdb/mdb-select-ng.png Hopefully this is now cleaner, Radek And the code (just copied from these pages): <pre> <div class="row"> <div class="col-md-6"> <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select> <label>Example label</label> </div> </div> </pre>
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

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
rl
Pro User 12Support score
5Questions 3Answers 0Snippets