Label not showing with select

Topic: Label not showing with select

waynefulcher pro asked 5 years ago

mdb-main-label with a select which has the following classes:(mdb-select md-form colorful-select dropdown-primary) should show a label over the select initially, when user clicks the label, the label should slide up and select options show.

I literally just copied and pasted the exact code as is on your demo page. The label does not show at all. The select works but label does not show.

Here are a few things I tried to fix it. After inspecting the html/css on the page, I noticed the label was consuming the space it was supposed to and in the right area. I also noticed it has a z-index of -1 which was set from the css class (.select-wrapper + label) defined in mdb.css line 11766. I added inline style to change the z-index to 0 and that sort-of fixed the issue. Now the label does show correctly as it should. However by modifying the z-index when you initially load the page and there is no selected option in the select, when you click the label which is positioned over the select the label is receiving the click event and thus the select does not open the options. If you click just off the label and still over the select, it works as expected. So then I changed the z-index back to -1 and then tried setting the elements which was over top of the label background-color to transparent. That does not seem to fix the issue either. Last thing I tried was I removed all the classes from the select except for mdb-select and that does not fix it either.

<!--Blue select-->
<select class="mdb-select md-form colorful-select dropdown-primary">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
<label class="mdb-main-label">Blue select</label>
<!--/Blue select-->`

Add comment

waynefulcher pro answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

FYI - Sorry for the bad timing but right after I posted this question I thought of one more thing to try. I added this css to an override css file I have which is loaded after mdb.css so anything I put in it would override your settings.

.select-wrapper + label {
    pointer-events: none;
    z-index: 1;
}

What that does is bring the label to the forground so you can see it but it also tells the browser to pass any click event to the element below the label. Not sure if you guys may want to add that to your css.

Piotr Glejzer staff commented 5 years ago

thanks for a report and for a fix. We will check it! Have a nice day.

Add comment

fmaeseele pro answered 5 years ago