To <tr> nie bierze wysokości potomka <span>, a niektóre przesyłki tekstu do następnego wiersza. Jak mogę sprawić, by rząd rozszerzył, aby zawierać zarówno tekst, jak i podpis?

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

Aktualna tabela:
Aktualna tabela

Pożądany stół:
Żądana tabela

2
Brian 15 luty 2017, 23:01

3 odpowiedzi

Najlepsza odpowiedź

Wygląda na to, że klasa .mdl_checkbox ma stałą wysokość 24px (Material.indigo-pink.min.cssss). Ta klasa jest nakładana na element <label>. Nadpisanie tego stylu wydawało się pomagać.

Ale nie jestem pewien, jak to wpłynie na inne elementy. Może "Material Design Lite" zapewnia bardziej zintegrowane rozwiązanie, a nie tylko nadpisanie istniejących stylów.

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>
0
Nisse Engström 19 luty 2017, 06:41

& lt; etykiet & gt; & span & gt; Elementy są właściwościami inline. Nie mogą więc mieć własności blokowej, takich jak O & LT ;. Proszę spojrzeć na etykietę & gt; Spec Tutaj i Span & GT; Spec Oto

Najpierw musisz naprawić elementy, a następnie podaj wyściółkę lub wysokość w , a następnie daj "Wyświetlacz: Inline-Block" w

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>
1
VvV 15 luty 2017, 21:02

Najpierw dodaj overflow:hidden do <tr>, aby ukryć zawartość przepełnionej, a jeśli chcesz przechowywać zawartość w jednym rzędzie, spróbuj tego:

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
}
0
Dmitriy Kovalenko 15 luty 2017, 20:25