<tr> не принимает высоту потомка <span>

Это <tr> не берет высоту потомка <span> и часть текста перетекает в следующую строку. Как можно расширить строку, включив в нее текст и подпись?

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-red.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<table class="mdl-data-table">
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p>
            <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

Текущая таблица:
Текущая таблица

Желаемая таблица:
Желаемая таблица

Источник

3 ответа

Решение

Похоже на класс .mdl_checkbox имеет фиксированную высоту 24px (material.indigo-pink.min.css). Этот класс применяется к <label> элемент. Преодоление этого стиля, казалось, помогло.

Но я не уверен, как это повлияет на другие элементы. Возможно, "Material Design Lite" предоставляет более интегрированное решение, а не просто переопределяет существующие стили.

label.mdl-checkbox {
  height: auto;
}
<link href="//code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
<script defer src="//code.getmdl.io/1.3.0/material.min.js"></script>
<table class="mdl-data-table">
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p>
            <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

Источник

Элементы

. Пожалуйста, посмотрите спецификацию

Сначала нужно исправить элементы, затем задать отступ или высоту в , а затем "display:inline-block" в 

label{
  display:block;
  padding:20px 0;
}
.mdl-checkbox__label{
  display:inline-block;
  vertical-align:top;
}

.mdl-typography--body-1{
  display:block;
  padding:0 0 20px;
}
.mdl-typography--caption{
  display:block;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table class="mdl-data-table" border=1>
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <span class="mdl-typography--body-1 mdl-typography--text-left" >
              Barack H. Obama
            </span>
            <span class="mdl-typography--caption mdl-typography--text-left" >
              Democratic
            </span>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Источник

Сначала добавьте overflow:hidden к <tr>, чтобы скрыть переполненный контент, и если вам нужно хранить контент внутри одной строки, попробуйте это:

label {
   display: flex;
   flex-wrap: nowrap;
}

label .mdl-checkbox__input {
   flex-basis: 20%;
}

label .mdl-checkbox__label {
   flex-basis: 80%;
   overflow: hidden;
   text-overflow: ellipsis; //will cut the word with ..., if it too long
   line-height: //your value
}
Источник
Другие вопросы по тегам