CODEWITHSUNDEEP
javascripthtmlcsscheckboxmaterial-design-lite
Renan
Renan

Reputation: 43

Checkbox of Material Design Lite isn't works on lists

I've made an simple web page that retrieves data from Firebase and displays in a list... And I'm using Material Design Lite framework to make the page more beautiful. Everything works nice, but the only problem is that the checkbox button doens't has material design. Anyone knows what happens?

I've followed the example "Avatars and controls" in MDL website: https://getmdl.io/components/index.html#lists-section and converted to JavaScript code. Here's my code:

var ul = document.getElementById(list);
var li = document.createElement("li");
var span = document.createElement("span");
var spanCheckbox = document.createElement("span");
var label = document.createElement("label");
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("id", (i + 1));
input.setAttribute("class", "mdl-checkbox__input");
input.setAttribute("onclick", "done(this.id)");
if (list === "solved") input.setAttribute("checked", "true");
componentHandler.upgradeElement(label);
label.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
label.setAttribute("for", (i + 1));
spanCheckbox.setAttribute("class", "mdl-list__item-secondary-action");
ul.setAttribute("class", "demo-list-control mdl-list");
li.setAttribute("id", (i + 1));
li.setAttribute("onclick", "done(this.id)");
li.setAttribute("class", "mdl-list__item clearList");
span.setAttribute("class", "mdl-list__item-primary-content");
span.appendChild(document.createTextNode(description));
label.appendChild(input);
spanCheckbox.appendChild(label);
li.appendChild(span);
li.appendChild(spanCheckbox);
ul.appendChild(li);

I've checked HTML of checkbox with Chrome developer tool and it's equal to HTML of Material Design Lite website example. Any other things works normally, so this is not problem with js or css files.

Checkbox without material design

The code of HTML in Chrome Developer Tools, after the page loaded: 

<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1"><input type="checkbox" id="1" class="mdl-checkbox__input" onclick="done(this.id)" checked="true">
</label>
</span>

Upvotes: 0

Views: 491

Answers (1)

Renan
Renan

Reputation: 43

SOLVED: componentHandler.upgradeElement(label); needs to stay after the creation of label.

Upvotes: 1

Related Questions