angular - Material design lite checkbox do not render properly -
in index.html fie have:
<!-- material design lite --> <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-red.min.css" /> <script src="/bower_components/material-design-lite/material.min.js"></script> <!-- material design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> <link rel="stylesheet" href="styles.css"> <!-- polyfill(s) older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script>
and checkbox have following code:
<div class="demo-checkbox mycheck"> <h5>you have choosen far</h5> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > <input type="checkbox" [(ngmodel)]="hashall" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">marriage hall</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > <input type="checkbox" [(ngmodel)]="hascaterer" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">caterer</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > <input type="checkbox" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">decorator</span> </label> </div>
this renders checkboxes following:
why so? buttons , other components are rendered correctly, it's checkbox face issue.
i put jsfiddle, , adding material design js library, checkboxes render correctly, maybe how referencing js, try this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>
Comments
Post a Comment