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.