Tobias Stampfl free asked 7 years ago

When i place a material select into a form with icon prefixes, it overlaps the icon. And when a selection is made, the Icon does not turn blue, like the normal input fields do. How can i fix this? material select problem

    <!--Modal: Contact form-->
    <div class="modal fade" id="licenseEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog cascading-modal" role="document">
            <div class="modal-content">

                <div class="modal-header light-blue darken-3 white-text">
                    <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      <!--<h4 class="title"> <img src="img/license_white_24.png"/> Lizenz </h4>-->
                      <h4><i class="fa fa-user"></i> Register</h4>

                <div class="modal-body mb-0">
                    <div class="md-form form-sm">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" id="form19" class="form-control">
                        <label for="form19">Your name</label>

                    <div class="md-form form-sm">
                        <i class="fa fa-intersex prefix"></i>
                        <select class="mdb-select colorful-select dropdown-primary">
                            <option value="0"></option>
                            <option value="1">Male</option>
                            <option value="1">Female</option>

                    <div class="md-form form-sm">
                        <i class="fa fa-envelope prefix"></i>
                        <input type="text" id="form2" class="form-control">
                        <label for="form2">Your email</label>

                    <div class="text-center mt-1-half">
                        <button class="btn btn-info mb-2">Send <i class="fa fa-send ml-1"></i></button>

    <!--Modal: Contact form-->

Marta Wierzbicka staff answered 5 years ago

Hi, any demo, please? Best, Marta

napsys pro answered 5 years ago

Hi, I have a problem, the first time it works, after clicking on the selector, if I click again it disables the part where the filter is written.

Marta Wierzbicka staff answered 6 years ago

Hi, In MDB 4.5.0 version it should work like on the attached screenshot: HTML: <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Sign in</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-5"> <i class="fa fa-envelope prefix grey-text"></i> <input type="email" id="defaultForm-email" class="form-control validate"> <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label> </div> <div class="md-form mb-4"> <i class="fa fa-lock prefix grey-text"></i> <input type="password" id="defaultForm-pass" class="form-control validate"> <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label> </div> <select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here.."> <option value="" disabled selected>Choose your country</option> <option value="1">USA</option> <option value="2">Germany</option> <option value="3">France</option> <option value="3">Poland</option> <option value="3">Japan</option> </select> <button class="btn-save btn btn-primary btn-sm">Save</button> </div> <div class="modal-footer d-flex justify-content-center"> <button class="btn btn-default">Login</button> </div> </div> </div> </div> <div class="text-center"> <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch Modal Login Form</a> </div> JS: // Material Select Initialization $(document).ready(function() { $('.mdb-select').material_select(); });   Best, Marta  

PavelVe pro commented 6 years ago

Hi Marta, it works. Thank you.

PavelVe pro answered 6 years ago

Hi Marta, please look at my screenshot. Check box is not centered in select. I tried to move it higher, but without success. Is it possible to fix this?

PavelVe pro answered 6 years ago

Hi Marta, thank you. It worked. Please look at my screenshot. Check box is not centered in select. I tried to move it higher, but without success. Is it possible to fix this?

joeynovak pro commented 6 years ago

I have the same problem. Would love to know how to center the checkboxes properly.

Marta Wierzbicka staff answered 6 years ago

Hi PavelVe, try this code to set the same font size, weight, and color as other inputs .select-wrapper { font-size: 0.9rem; color: #757575; font-weight: 300; } Best, Marta

Tobias Stampfl free answered 7 years ago

Thanks a lot, it worked. Kind regards Tobias

Marta Wierzbicka staff answered 7 years ago

Hi, to fix this issue, add to your CSS this code:
.mdb-select {
            width: 97%;
            padding-left: 2.2rem;
Best, Marta

PavelVe pro commented 6 years ago

Hello, is it possible set same font (size and color) as other items in form?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No