Materialize multiple-select boxes

Question

My understanding is that Materialize doesn't support styled multiple-select boxes - you have to specify browser-default and not use Materialize styling. (correct me if I'm wrong)

So I've tried to make an equivalent with Materialize dropdown with checkboxes inside the dropdown like this:

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true">
Relates to topics...</a>
<ul id='topics_dropdown' class='dropdown-content'>
    <li>
      <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
      <label for="report_topics_409928004">Engagement</label>
    </li>
    <li>
      <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
      <label for="report_topics_669658064">Appraisal</label>
    </li>

    <!-- etc. -->

</ul>

But there's a glitch in how this gets rendered. The text and boxes gets offset by half a line downward, so the highlighting hover effect highlights a rectangle that overlaps two different options. Is there any way to correct this glitch?

Here's a screenshot. It's not the same content as the example code above but it's the same dropdown-checkbox structure.

Armilla

put up a fiddle mate :) – Stephniestepladder

Answer 1

My workaround has been to put each checkbox in its own div inside the dropdown rather than using the dropdown list structure

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> Relates to topics...</a>
<div id='topics_dropdown' class='dropdown-content'>
    <div>
      <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
      <label for="report_topics_409928004">Engagement</label>
    </div>
    <div>
      <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
      <label for="report_topics_669658064">Appraisal</label>
    </div>

    <!-- etc. -->

</div>

It doesn't have the hover effect, but it works.

Armilla

Answer 2

[type="checkbox"]+label {
    display: inline;
}

Calices