Search code examples
javascripthtmlcssvue.jsmaterial-design-lite

Material Design Lite Table - Adding Rows Dynamically Breaks Format

This is the markup for the checkbox using material-design-lite:

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
  <input type="checkbox" id="checkbox" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

Problem is, that the labels for is connected to the inputs id.

So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add these rows into a database?

Here is the working example:

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

Notice the checkbox of the new task you add

Solution

  • As mentioned, you need to upgrade the element. You could call componentHandler.upgradeDom() instead of componentHandler.upgradeElement().

    http://codepen.io/pespantelis/pen/pjbvBL