Материализуйте поля множественного выбора

Насколько я понимаю, Materialize не поддерживает стилизованные поля с множественным выбором - вы должны указать браузер по умолчанию и не использовать стиль Materialize. (поправьте меня если я ошибаюсь)

Итак, я попытался сделать эквивалент с раскрывающимся списком Materialize с флажками внутри раскрывающегося списка, например:

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

Но есть ошибка в том, как это отображается. Текст и поля смещаются на половину строки вниз, поэтому эффект выделения при наведении выделяет прямоугольник, который перекрывает два разных параметра. Есть ли способ исправить этот глюк?

Вот скриншот. Это не то же самое содержимое, что и в приведенном выше примере кода, но это та же структура раскрывающегося списка и флажка.

скриншот


css materialize dropdownbox
person Toby 1 Kenobi    schedule 03.08.2015    source источник
comment
поставь скрипку дружище :)   -  person Siddharth    schedule 08.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Мой обходной путь заключался в том, чтобы поместить каждый флажок в отдельный div внутри раскрывающегося списка, а не использовать структуру раскрывающегося списка.

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

Эффекта наведения нет, но работает.

person Toby 1 Kenobi    schedule 04.11.2015