Material Select inside of Card component


Topic: Material Select inside of Card component

Jens Ober pro asked 7 years ago

I am facing two issues, when i use mdb-select inside a card component.
  1. the caret on the right side is not visible
  2. the label is overlapping the card header
Please have a look: https://www.dropbox.com/s/txupojkfn3735wj/2018-02-15%2014_23_47-Material_Select.png?dl=0   <div class="card mb-5"> <h3 class="card-header">Choose...</h3> <div class="card-body"> <mdb-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select> <label>Blue select</label> </div> </div> Is there anything i am doing wrong here?

Damian Gemza staff answered 7 years ago

Hello again, Jens Ober, 1st problem: Please add below styles to global stylesheet "styles.scss" located in /src directory:
mdb-select > div > div.single > div.toggle {

z-index: 1;

}
2nd problem: I've modified your markup. Now it includes margin-bottom for div.card-header.
<div class="card mb-5">

<div class="card-header mb-4">

<h3>Choose…</h3>

</div>

<div class="card-body">

<mdb-select [options]="optionsSelect" name="select" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>

<label for="select">Blue select</label>

</div>

</div>

Best Regards,
Damian

Jens Ober pro commented 7 years ago

Hi Damian, thank you. It works! Regards, Jens

Damian Gemza staff commented 7 years ago

Glad that could help you! Closing ticket right now. Best Regards, Damian

Damian Gemza staff answered 7 years ago

Hey guys, This problem will be fixed in next release of MDB Angular. You can now find it on our GitLab dev branch! Feel free to upgrade and test. Best Regards, Damian
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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No