Material Select inside of Card component

Topic: Material Select inside of Card component

Jens Ober pro asked 6 years ago

I am facing two issues, when i use mdb-select inside a card component.

the caret on the right side is not visible
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?

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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

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

Damian Gemza staff commented 6 years ago

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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

Jens Ober

Pro User 20Support score
3Questions 2Answers 0Snippets