Griglia Lite Design Material con tabelle

Sto sperimentando con il kit MDL rilasciato di recente e cercando di utilizzare il layout della griglia con schede e tabelle.Griglia Lite Design Material con tabelle

ho scoperto che la griglia MDL non è flessibile come la griglia Bootstrap per le colonne nidificate (probabilmente perché non ne so ancora abbastanza). Quindi nel mio layout a 3 colonne uso le carte e i tavoli fianco a fianco per presentare i dati che ho.

Ma sfortunatamente la scheda non copre l'intera larghezza di una colonna a meno che non applichi manualmente la larghezza = 100%. Ma appena lo faccio il tavolo non è reattivo e si sovrappone alle carte in giro quando le dimensioni dello schermo si riducono.

JSFiddle

Qualcuno può dirmi come sbarazzarsi di questo problema.

<body> 
    <main class="mdl-layout__content"> 
    <div class="page-content"> 
     <div class="demo-grid-1 mdl-grid"> 
      <div class="mdl-cell mdl-cell--4-col "> 
       <div class="mdl-card mdl-shadow--4dp demo-card-wide"> 
        <div class="mdl-card__media"> 
         <img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;"> 
        </div> 
        <div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div> 
        <div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div> 
       </div> 
      </div> 
      <div class="mdl-cell mdl-cell--4-col"> 
       <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%"> 
        <thead> 
         <tr> 
          <th class="mdl-data-table__cell--non-numeric">Material</th> 
          <th>Quantity</th> 
          <th>Unit price</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td> 
          <td>25</td> 
          <td>$2.90</td> 
         </tr> 
         <tr> 
          <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td> 
          <td>50</td> 
          <td>$1.25</td> 
         </tr> 
         <tr> 
          <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> 
          <td>10</td> 
          <td>$2.35</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div class="mdl-cell mdl-cell--4-col"> 
       <div class="mdl-card mdl-shadow--2dp demo-card-wide"> 
        <div class="mdl-card__title"> 
         <h2 class="mdl-card__title-text">Welcome</h2> 

        </div> 
        <div class="mdl-card__supporting-text"> 
         <div class="demo-grid-1 mdl-grid"> 
          <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div> 
          <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div> 
          <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div> 
          <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </main> 
</body>

fonte

2015-07-11 Ish

Sembra che le tabelle non sono realmente sensibili a tutti, utilizzando il [esempio da loro sito] (http://codepen.io/anon/pen/EjLraY) non risponde affatto al cambio di larghezza. Inoltre, fornisci il codice di esempio solo del tuo problema e non del codice circostante (come la barra di navigazione e roba), oltre a separare il css da html (rende più chiaro quali stili hai applicato), come [so] (https : //jsfiddle.net/x9gj73y7/2/). Temo di non sapere se c'è una soluzione. – jdepypere

@jdepypere mi dispiace per tutte le cose non essenziali. L'ho ripulito un po '. – Ish

@jdepypere è corretto sulle tabelle che non rispondono. Non esiste una guida per la progettazione dei materiali per questo e fare ciò è un dolore indipendentemente dalla guida UX. Puoi usare le larghezze della cella sulla tabella stessa per cambiarne la larghezza, ma questa è la sua estensione (e potrebbe causare alcuni errori di allineamento su cui poi devi lavorare.) – Garbee

Vediamo se posso aiutarti con ogni problema:

In primo luogo, le carte non occupare l'intera colonna. Il problema sono i div nidificati. Se si effettua la colonna in questo modo:

<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">

piuttosto che mettere la scheda all'interno della colonna, poi ci vorrà l'intera colonna. Vedi il JSFiddle aggiornato here.

successivo, per le colonne nidificate, è necessario disporre di annidato griglie, in questo modo:

<main class="mdl-layout__content"> 
    <div class="mdl-grid"> 
     <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> 
      <div class="mdl-card__supporting-text"> 
       <main class="mdl-layout__content"> 
        <div class="mdl-grid"> 
         <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">

Vedi l'JSFiddle here.

Sembra che tu abbia cambiato un po 'il tuo obiettivo, ma spero che tu possa mettere insieme questi due per risolvere il tuo problema.

fonte

2015-07-14 16:46:38

Per fare in modo che la tabella si adatti alle dimensioni del contenitore e rispondere a qualsiasi modifica delle dimensioni, è possibile impostare l'attributo larghezza su una determinata percentuale.

<table class="mdl-data-table mdl-js-data-table" style="width:100%;"> 
 
    ... 
 
</table>

fonte

2015-07-15 02:02:42 Gabriel

Ecco come si fa:

.mdl-data-table { 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
#my-table td, th { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -o-text-overflow: ellipsis; 
 
} 
 

 
/* unrelated to responsive table css */ 
 
#my-table{ 
 
    margin-top:24px; 
 
} 
 
.material-icons { 
 
    vertical-align: -25%; 
 
}

<meta name="description" content="Responsive Material Design Lite Table" /> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.green-light_green.min.css" /> 
 
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 

 
<section class="mdl-grid" id="my-table"> 
 
    <div class="mdl-layout-spacer"></div> 
 
    <div class="mdl-cell mdl-cell--6-col-tablet mdl-cell--10-col-desktop mdl-cell--stretch"> 
 

 
    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
 
     <thead> 
 
     <tr> 
 
      <th>Key</th> 
 
      <th>Description</th> 
 
      <th>Run</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Work</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Play</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Study</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Assumptions</th> 
 
      <th>Climb Mountain</th> 
 
      <th>Fly Kite</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>ABC-1234</td> 
 
      <td>asdf asdf asdf asdf</td> 
 
      <td>asdf asdf asdf asdf</td> 
 
      <td>25</td> 
 
      <td>qwer qwer qwer</td> 
 
      <td>25</td> 
 
      <td>sdfgs sdf sdgf</td> 
 
      <td>25</td> 
 
      <td>lkjhlk lkhjh</td> 
 
      <td>25</td> 
 
      <td>bvnfhf hffjj hdgdh</td> 
 
      <td>25</td> 
 
      <td>bjh jbh kjb bkjb</td> 
 
     </tr> 
 
     <tr> 
 
      <td>XYZ-1234</td> 
 
      <td>dfdf asdf asdf asdf</td> 
 
      <td>bgbgdf asdf asdf asdf</td> 
 
      <td>25</td> 
 
      <td>qwer qwer qwer</td> 
 
      <td>25</td> 
 
      <td>sdfgs sdf sdgf</td> 
 
      <td>25</td> 
 
      <td>lkjhlk lkhjh</td> 
 
      <td>25</td> 
 
      <td>bvnfhf hffjj hdgdh</td> 
 
      <td>25</td> 
 
      <td>bjh jbh kjb bkjb</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div class="mdl-layout-spacer"></div> 
 
</section>

fonte

2016-07-17 18:50:07

Cool. Grazie Ron. Questa risposta è stata perfetta per me! È anche utile non mostrare tutte le colonne sui dispositivi mobili. Grazie per il tuo impegno nel fornire una risposta di qualità. –

Griglia Lite Design Material con tabelle

risposta

Problemi correlati