materialize: Checkboxes won't render without label, and label needs to be in the right place

👍 Same problem here. Why does the whole checkbox disappear if there is no label? I don’t want my checkboxes to have a label… I can’t even use the class ‘browser-default’ to make a regular html checkbox appear…

Not a real solution, but when using checkboxes in a datagrid, I used the following CSS to get them to show up without labels:

 [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: static;
    left: 0px; 
    opacity: 1; 
  }

@friek108 you can use a space as a checkbox label on a table row

<td class="action-checkbox">
    <input class="action-select" name="_selected_action" id="_selected_action_1" type="checkbox" value="2483">
    <label for="_selected_action_1">&nbsp;</label>
 </td>

demo: http://forms.viewflow.io/admin/integration/city/

This is on purpose. We are looking into using a wrapping label format in the future tho.

This is magic css to repair spoiled by materialze css.

[type=“checkbox”]:not(:checked), [type=“checkbox”]:checked { position: static!important; left: 0px!important; opacity: 1!important; visibility: visible!important; pointer-events: all!important; }

I think it is absurd to hide all inputs, even those that are not changed. It is not too complicated to hide those that have labels … Why authors dont add some var or class for replaced checkboxes and only this is hidden ?

This proves quite difficult when pairing with other libraries. Might another solution or workaround be provided, so that I will not need to custom build to avoid this problem or hack JS/override CSS?

Thanks so much for a really, really nice library.

I think even a comment works. 😃 Should be any DOM object, actually.

http://codepen.io/anon/pen/XNJgjq

This will work:

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>
</label>

If you want to use the checkbox without a visible span and not be able to click outside the box, use this.

<label>
    <input type="checkbox"/>
    <span style="padding-left: 0px;">
    </span>
</label>

Checkboxes disappeared. The following code exists in a library and I could not modify it.

<label>
   <input type="checkbox" class="leaflet-control-layers-selector">
    label_string
</label>

Here is a simple workaround. It worked for me.

[type="checkbox"].leaflet-control-layers-selector {
    position: static !important;
    left: 0px  !important; 
    opacity: 1  !important; 
}

This is causing problem in Django formsets since the label changes depending on the checkbox id #. Does anyone know a workaround for Django DELETE checkbox?

Same problem…how would i tie an event to emit a check all function

Most certainly +1ing this, I typically think that for a browser checkbox that there are way too many circumstances for it to be useful, and the base override being applied in a blanket style is too restricting, would there be a way of adding something like a ‘browser-default’ class (or adding classes to the checkbox+label combo) in order to have the browser defaults applied?