Выровнять флажок внутри карты

Question

Я использую materializecss , и я пытаюсь установить флажок в карточку:

<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>

Проблема, я думаю, в том, что элемент "круг"делает что-то, что влияет на флажок, вызывая не показывать

#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;
}

Я хочу добиться чего-то вроде этого:

Я пытался «поиграть» с позициями элементов и ничего не понял, что я делаю не так?

Вот мой CodePen

Спасибо.

Answer 1

Насколько я понимаю, с вашим CSS все в порядке.Тем не менее, materialize.min.css устанавливает непрозрачность равной 0.

Это потому, что Materialise использует пользовательские флажки (например, начальную загрузку), и вы не можете просто вставить HTML-флажок по умолчанию в свой код.

Прежде всего вы должны импортировать JS-файлы .

Теперь, вместо того, чтобы просто набирать: <input type="checkbox" />, вам необходимо заключить флажок в <label> -Tags.После вашего флажка следует <span> -Tag.

Замените свой флажок на:

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

и внедрите JS-файл.Вот пример рабочего кода:

#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>

Руководство и документацию можно найти на их веб-сайте .

Answer 2

Я перешел к Материализации документации и нашел ее довольно бесполезной.То, что они говорят о лейбле и применении материала for="inputID", не имеет значения.Я заставил его работать, добавив span после флажка: <input type="checkbox" /><span>Checkbox Label</span> Разветвленное перо: https://codepen.io/vipatron/pen/EdYjYx

Обновление: Хорошо, после того, как я вернулся к нему, я понимаю, что поведение, которое материализует, обещает "при нажатии "флажка НЕ ​​требуется тег <label> для переноса <input>.(Пример в коде).Я до сих пор не знаю слишком много о том, какое поведение должен обеспечивать for / id, но я знаю, что это хорошая практика для семантического HTML.

Answer 3

Я не слишком знаком с материализацией, но у их css есть это:

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

Чтобы отрегулировать и увидеть флажок, вам нужно изменить непрозрачность и левую и правую позиции.Примерно так:

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

Вы можете отрегулировать верхнюю и левую стороны, чтобы флажок выровнялся в нужном месте.Я бы также предложил добавить класс к флажку и использовать ваш новый селектор классов для обновления стиля вместо перезаписи файла материализации.

что-то вроде:

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

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