Align checkbox inside a card

Question

I'm using materializecss, and i'm trying to align a checkbox into a card:

<div id="email-list" class="col s10 m8 l8 card-panel z-depth-1">
   <ul class="collection">
      <li class="collection-item avatar email-unread">
         <input type="checkbox" />
         <div class="mail-card-el">
            <span class="circle red lighten-1">A</span>
            <span class="email-title">Test card</span>
            <p class="truncate grey-text ultra-small">Summer sale is now going on.</p>
            <a href="#!" class="secondary-content email-time">
            <span class="blue-text ultra-small">12:10 am</span>
            </a>
         </div>
      </li>
   </ul>
</div>

The problem, I think, is that the element "circle" is doing something that affects the checkbox, causing to don't show

#email-list .collection .collection-item.avatar .circle {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    left: 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 300;
    padding: 10px;
}

I want to achieve something like this:

I was trying to "play" with the positions of the elements and i got nothing, what I'm doing wrong?

Here is my CodePen

Thanks.

Answer 1

As far as I can see it, it's nothing wrong with your CSS. However, the materialize.min.css sets the opacity to 0.

This is, because Materialize uses custom checkboxes (like bootstrap) and you can't just put a default HTML-Checkbox in your Code.

First of all you should import the JS-Files.

Now, instead of just typing: <input type="checkbox" />, you need to wrap your checkbox in <label>-Tags. After your checkbox follows a <span>-Tag.

Replace your checkbox with:

<label>
   <input type="checkbox" />
   <span><!--Text inside here is optional--></span>
</label>

and implement the JS-File. Here is a working code example:

#email-list .collection .collection-item.avatar {
  height: auto;
  padding-left: 72px;
  position: relative;
}

#email-list .collection .collection-item.avatar .secondary-content {
  position: absolute;
  top: 10px;
}

#email-list .collection .collection-item.avatar .secondary-content.email-time {
  right: 8px;
}

#email-list .collection .collection-item.avatar .icon {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  top: 20px;
}

#email-list .collection .collection-item.avatar .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 300;
  padding: 10px;
}

#email-list .collection .collection-item.avatar img.circle {
  padding: 0;
}

#email-list .collection .collection-item:hover {
  background: #e1f5fe;
  cursor: pointer;
}

#email-list .collection .collection-item.selected {
  background: #e1f5fe;
  border-left: 4px solid #29b6f6;
}

#email-list .attach-file {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #bdbdbd;
  font-size: 1.1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div id="email-list" class="col s10 m8 l8 card-panel z-depth-1">
  <ul class="collection">
    <li class="collection-item avatar email-unread">
      <label>
        <input type="checkbox" />
        <span></span>
      </label>
      <div class="mail-card-el">
        <span class="circle red lighten-1">A</span>
        <span class="email-title">Test card</span>
        <p class="truncate grey-text ultra-small">Summer sale is now going on.</p>
        <a href="#!" class="secondary-content email-time">
          <span class="blue-text ultra-small">12:10 am</span>
        </a>
      </div>
    </li>
  </ul>
</div>

A guide and documentation can be found on their website.

Answer 2

I went to the Materialize documentation and found it fairly unhelpful. The stuff they are saying about the label and applying the for="inputID" stuff was irrelevant. I got it to work by adding a span after the checkbox: <input type="checkbox" /><span>Checkbox Label</span> Forked pen: https://codepen.io/vipatron/pen/EdYjYx

Update: Okay, after I went back to it, I realize that the behavior that Materialize promises "on click" of the checkbox DOES require the <label> tag to wrap the <input>. (An example is in the codepen). I still don't know too much about what behavior the for/id is supposed to supply, but I do know it's good practice for semantic HTML.

Answer 3

I'm not too familiar with materialize, but their css has this:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

In order to adjust and see the check box you'd need to change the opacity and left and right positions. Something like:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  top: 1px;
  left: 1px;
}

You can adjust top and left so the check box aligns where you want it. I'd also suggest adding a class to the checkbox and use your new class selector to update the style, instead of overwriting the materialize file.

something like:

<input type="checkbox" class="my-checkbox" />

.my-checkbox {
  position: absolute;
  opacity: 1;
  top: 1px;
  left: 1px;
}