Geek Answers Handbook

Lite Material Design with Tables

I am experimenting with the recently released MDL suite and am trying to use a grid with maps and tables.

I found that the MDL grid is not as flexible as the Bootstrap grid for nested columns (perhaps because I don't know enough about it yet). Therefore, in my 3rd column, I use maps and tables side by side to represent the data that I have.

But, unfortunately, the map does not cover the entire width of the column, unless I apply the width = 100% manually. But as soon as I do this, the table does not respond and overlays the cards around when the screen size decreases.

Jsfiddle

Can anyone tell me how to get rid of this problem.

<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>
+8
material-design-lite
source share
3 answers

Let's see if I can help you with every problem:

Firstly, the cards do not occupy the entire column. The problem is nested divs. If you make the column as follows:

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

instead of putting the card in a column, then it will occupy the entire column. See Updated JSFiddle here .

Next, for nested columns, you need to have nested grids, for example:

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

See JSFiddle here .

It sounds like you have slightly changed your goal, but hopefully you can combine the two to fix your problem.

+8
source share

Here's how to do it:

 .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>
+3
source share

In order for your table to adapt to the size of its container and respond to any size change, you can set your width attribute to a certain percentage.

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

More articles:


All Articles