Multiple material select


Topic: Multiple material select

Tech Labx asked 7 years ago

Multiple material select doesn't align correctly on the same line as corresponding check boxes.

Mikołaj Smoleński staff commented 7 years ago

Please write here Your code in order to find the bug and fix it.

Tech Labx answered 7 years ago

<div class="col-md-6">
    <div class="md-form">
        <select id="select" class="mdb-select grey-text" multiple>
            <option value="" disabled selected>Select Facilities To Visit</option>
            <option value="1">Chiller Rooms</option>
            <option value="2">Battery Room 1</option>
            <option value="3">Battery Room 2</option>
            <option value="4">UPS Room 1</option>
            <option value="4">UPS Room 2</option>
            <option value="4">UPS Room 3</option>
            <option value="4">UPS Room 4</option>
            <option value="4">UPS Room 5 (Chiller Rooms)</option>
            <option value="4">Entrance Room 1</option>
            <option value="4">Gas Room</option>
            <option value="4">Telecoms Room</option>
            <option value="4">High Voltage</option>
            <option value="4">Low Voltage</option>
            <option value="4">NOS</option>
            <option value="4">MDA Room</option>
            <option value="4">F1</option>
            <option value="4">F2</option>
            <option value="4">F3</option>
            <option value="4">F4</option>
        </select>
        <label for="select"></label>
    </div>
</div>

<script>
    // Material Select Initialization
    $(document).ready(function() {
        $('.mdb-select').material_select();
    });
</script>



Tech Labx commented 7 years ago

This is my code, its supposed to work, but for some reason the labels and the check boxes don't align correctly.

Mikołaj Smoleński staff answered 7 years ago

Hi, You just need to remove div with class "md-form" to fix that issue. Regards

Tech Labx commented 7 years ago

Thanks a lot. Fixed it

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No