Material design table not displaying full width Angular2

Question

Hello I have a simple angular application which displays the following when the component loads

The table for some reason is not displaying full width inside the left panel

template code is as follows

<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
      <h3>Tasks Page    
      <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width">
          <thead>
            <tr>
              <th class="mdl-data-table__cell--non-numeric full-width">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>

Any ideas how I can display the table full width ?

plunkr - https://plnkr.co/edit/syTYmhFRX4cPDPk49wDF?p=preview — user2180794, May 28 '16 at 05:23

Pardeep Jain · Accepted Answer · 2016-05-28T05:59:48.867

0

Just change this line with

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width">

with

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width" style='width:100%'>

try this one with col-12

<div class="demo-graphs  mdl-color--white mdl-cell mdl-cell--12-col">

Updated Working Plunker

edited May 28 '16 at 05:59

answered May 28 '16 at 05:27

Pardeep Jain

84,110
37
165
215

This apparently is not responsive.. the table is displaying only partially on the phone. – user2180794 May 28 '16 at 05:48
check this one my Update @user2180794 – Pardeep Jain May 28 '16 at 06:00
didn't work .. it pushes the datacards to the bottom – user2180794 May 28 '16 at 06:02
In the screenshot, I didn't add it to plunker. – user2180794 May 28 '16 at 06:04
1

than you have to add this to the plunker, the code you given to me i resolve the issue – Pardeep Jain May 28 '16 at 06:06
1

This is an issue with the material design table itself. It is not responsive. http://stackoverflow.com/questions/32317740/how-to-make-mdl-tables-responsive – user2180794 May 28 '16 at 22:16

Material design table not displaying full width Angular2

1 Answers1