Material Design Lite Raster mit Tabellen

Ich experimentiere mit dem kürzlich veröffentlichten MDL-Kit und versuche, das Rasterlayout mit Karten und Tabellen zu verwenden.Material Design Lite Raster mit Tabellen

Was ich fand, war das MDL-Gitter ist nicht so flexibel wie das Bootstrap-Gitter für verschachtelte Spalten (wahrscheinlich, weil ich noch nicht genug darüber weiß). In meinem 3-Spalten-Layout verwende ich Karten und Tabellen nebeneinander, um die Daten zu präsentieren, die ich habe.

Aber leider erstreckt sich die Karte nicht über die gesamte Breite einer Spalte, es sei denn, ich width width = 100% manuell anwenden. Aber sobald ich es mache, reagiert der Tisch nicht mehr und überschneidet sich mit Karten, wenn die Bildschirmgröße abnimmt.

JSFiddle

Kann mir jemand sagen, wie dieses Problem zu beseitigen.

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

Quelle

2015-07-11 Ish

Es scheint, wie die Tische gar nicht wirklich ansprechbar sind, aus dem [Beispiel mit ihren Website] (http://codepen.io/anon/pen/EjLraY) reagiert es überhaupt nicht auf Breitenänderung. Geben Sie auch einen Beispielcode nur für Ihr Problem und keinen umgebenden Code (wie die Navigationsleiste und andere Sachen) an, und trennen Sie die CSS von HTML (macht deutlicher, welche Stile Sie angewendet haben), wie [so] (https : //jsfiddle.net/x9gj73y7/2/). Ich fürchte, ich weiß nicht, ob es eine Lösung gibt. – jdepypere

@jdepypere Sorry über alle nicht-essentiellen Sachen. Ich habe es ein wenig aufgeräumt. – Ish

@jdepypere ist korrekt, wenn Tabellen nicht reagieren. Es gibt keine Material Design Anleitung dafür und das ist ein Schmerz, unabhängig von der UX Anleitung. Sie können Zellbreiten in der Tabelle selbst verwenden, um ihre Breite zu ändern, aber das ist der Umfang davon (und es kann einige Ausrichtungsfehler verursachen, an denen dann gearbeitet werden muss.) – Garbee

Mal sehen, ob ich Ihnen mit jedem Problem helfen:

Zunächst werden die Karten nicht die gesamte Spalte einnimmt. Das Problem sind die verschachtelten divs. Wenn Sie die Spalte wie diese machen:

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

anstatt die Karte in der Spalte setzen, dann wird es die gesamte Spalte in Anspruch nehmen. Siehe die aktualisierte JSFiddle here.

nächstes für verschachtelte Spalten, müssen Sie Gitter verschachtelt sind, wie folgt aus:

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

Siehe JSFiddle here.

Es klingt, als ob Sie Ihr Ziel ein wenig geändert haben, aber hoffentlich können Sie diese beiden zusammensetzen, um Ihr Problem zu beheben.

Quelle

2015-07-14 16:46:38

Damit sich Ihre Tabelle an die Größe ihres Containers anpasst und auf jede Größenänderung reagiert, können Sie ihr Attribut width auf einen bestimmten Prozentsatz setzen.

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

Quelle

2015-07-15 02:02:42 Gabriel

Hier ist, wie es zu tun:

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

Quelle

2016-07-17 18:50:07

Cool. Danke Ron. Diese Antwort war perfekt für mich! Es ist auch praktisch, nicht alle Spalten auf dem Handy zu zeigen. Danke für Ihre Bemühungen um eine qualitativ hochwertige Antwort. –

Material Design Lite Raster mit Tabellen

Antwort

Verwandte Themen