Materializza caselle di selezione multipla

Question

La mia comprensione è che Materialise non supporta le caselle di selezione multipla con stile: è necessario specificare il browser predefinito e non utilizzare lo stile Materialize. (Correggetemi se sbaglio)

Così ho provato a fare un equivalente con Materialise a discesa con le caselle di controllo all'interno del menu a discesa come questo:

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

Ma c'è un problema tecnico nel modo in cui questo viene reso. Il testo e le caselle vengono sfalsati di mezzo linea verso il basso, quindi l'effetto di attivazione dell'evidenziazione evidenzia un rettangolo che si sovrappone a due diverse opzioni. C'è un modo per correggere questo problema tecnico?

Ecco uno screenshot. Non è lo stesso contenuto del codice di esempio sopra ma è la stessa struttura a discesa.

Answer 1

mia soluzione è stata quella di mettere ogni casella di controllo nella propria div all'interno della discesa piuttosto che utilizzare la struttura di elenco a discesa

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

Non ha l'effetto hover, ma funziona .

Answer 2

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