0

I'm trying to use Bootstrap-Material in my website.

I'm having a problem getting the checkbox to work. When I copy the code from the Bootstrap-Material site to my project, most of the features work, but no Box appears beside the label "Checkbox". Instead of looking like

material checkobx

it looks like

checkbox material

I've been going through the source code on the Bootstrap-Material and I've imported all the css and js they have.

What's confusing is, I've inspected the elements on the Checkbox of the Bootstrap-Material page and I can't figure out what css or js file is actually creating the checkbox. It doesn't seem to be coming from an image file, so where is it coming from? Perhaps if I can figure out where it is created, I can figure out why my project is not rendering it.

Any ideas on where this box comes from?

T J
  • 42,762
  • 13
  • 83
  • 138
CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
  • take a look around roughly here in the source: https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/css/material.css#L3797 – Claies Aug 03 '15 at 04:33

1 Answers1

2

Two things to check:

1: Are you calling $.material.init() to active Material Design.
2: Are your CSS files stacked with Material Design before the Bootstrap v3.0+ file.
3: You're using jQuery 1.9.1+.

$.material.init()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <h1 class="header">Checkbox</h1>

  <!-- Simple checkbox with label -->
  <div class="sample1">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Notifications</label>
    </div>

  </div>


</div>
vanburen
  • 21,502
  • 7
  • 28
  • 41
  • 2
    Thanks a lot! Turns out I was missing `$.material.init`. I added `window.onload = function(){$.material.init();};` and now it works! – CodyBugstein Aug 03 '15 at 18:30
  • Slight issue; I'm using this in Angular with ui-router, and each time I go to a new page it stops working, until I refresh the page. Any idea why? Do I have to somehow reload it at each new path? – CodyBugstein Aug 03 '15 at 19:27
  • Honestly, I've never used the two together but maybe this will help: https://github.com/FezVrasta/bootstrap-material-design/issues/191 – vanburen Aug 03 '15 at 20:10
  • I don't know why but it stopped working again... where did you get that css from? – CodyBugstein Aug 04 '15 at 03:09
  • never mind... works now that I put the css after the js as you did – CodyBugstein Aug 04 '15 at 03:12
  • thank you,I'll try after ajax load container.So faster worked,than page load . – Elyor Oct 28 '17 at 21:54