Topic: MaterialSelect label not showing if container has a background color

Legay free asked 4 years ago


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; }


Marta Wierzbicka staff answered 4 years ago


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



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>

Marta Wierzbicka staff answered 4 years ago


Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best, Marta



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: 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