Topic: MaterialSelect label not showing if container has a background color
Expected behavior
Select box's label should be visible regardless of its container's background color and depth.
Actual behavior
The select box's default value has a negative z-index, which I'm guessing is done to allow click-throughs. This is a problem whenever the control is placed in a container with a background color, and makes it usefulness very limited.
Resources (screenshots, code snippets etc.)
Our fix is to override the label's CSS properties as follows:
.select-wrapper + label { z-index: auto !important; pointer-events: none !important; }
Hi,
would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best, Marta
Hi, same issue here The version 4.7.7 is not available in the Snippet creation form so the bug cannot be reproduced there The behavior can be reproduced with just these lines :
<div class="card mb-5">
<h4 class="card-title">MdSelect 4.7.7</h4>
<select class="mdb-select md-form" searchable="Search here..">
<option value="" disabled >Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3" selected="selected">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
<label class="mdb-main-label">Label example</label>
</div>
<script>
$(document).ready(function () {
$('.mdb-select').materialSelect();
});
</script>
Hi,
we will add your solution to our package, thanks for noticing this. And your solution plus code from this snippet works for me: https://mdbootstrap.com/snippets/jquery/marta-szymanska/620966
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.7
- Device: laptop
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No