Material Select in Form

Topic: Material Select in Form

Tobias Stampfl asked 8 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">
            <!--Content-->
            <div class="modal-content">

                <!--Header-->
                <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>
                    </button>
                      <!--<h4 class="title"> <img src="img/license_white_24.png"/> Lizenz </h4>-->
                      <h4><i class="fa fa-user"></i> Register</h4>
                </div>

                <!--Body-->
                <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>

                    <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>
                        </select>
                        <label>Sex</label>
                    </div>

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

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

                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    <!--Modal: Contact form-->

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

Hi, to fix this issue, add to your CSS this code:

.mdb-select {
            width: 97%;
            padding-left: 2.2rem;
        }

Best, Marta

PavelVe pro commented 7 years ago

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

Add comment

Tobias Stampfl answered 8 years ago

0 0 Best answer

Thanks a lot, it worked. Kind regards Tobias

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

Hi PavelVe, try this code to set the same font size, weight, and color as other inputs

.select-wrapper input.select-dropdown {
font-size: 0.9rem;
color: #757575;
font-weight: 300;
}

Best, Marta

Add comment

PavelVe pro answered 7 years ago

0 0 Best answer

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? https://www.dropbox.com/s/nywtoc1vpa53sq3/Screen%20Shot%202018-02-15%20at%2010.24.11.png?dl=0

joeynovak pro commented 7 years ago

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

Add comment

PavelVe pro answered 7 years ago

0 0 Best answer

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? https://www.dropbox.com/s/nywtoc1vpa53sq3/Screen%20Shot%202018-02-15%20at%2010.24.11.png?dl=0

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

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">×</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 7 years ago

Hi Marta, it works. Thank you.

Add comment

napsys pro answered 6 years ago