Align checkbox inside a card

elunap

New Member
#1
I'm using materializecss, and i'm trying to align a checkbox into a card:
Mã:
<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
Mã:
#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:

NQHiy.png

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.
 

Admin

Administrator
Thành viên BQT
#2
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: https://materializecss.com/getting-started.html

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

Mã:
<label>
   <input type="checkbox" />
   <span><!--Text inside here is optional--></span>
</label>
and implement the JS-File. Here is my updated pen: https://codepen.io/aaron-von-schassen/pen/WaebqK

Edit: A guide and documentation can be found on their website.
 
Top