CODEWITHSUNDEEP
angularjsangular-material
mindparse
mindparse

Reputation: 7225

Angular Material - use of hide attributes

I am having a problem using the hide- attributes provided with angular material on a table where I am trying to hide columns at certain breakpoints.

I have a very simple table example where the header and row cells using hide attributes like so:

<md-card layout="row">
      <table class="main-table" layout-fill flex layout="column">
        <thead flex>
          <tr layout="row">
            <th flex hide-sm>Status</th>
            <th flex hide-md>Value</th>
            <th flex hide-md>Type</th>
            <th flex hide-sm>Action</th>
            <th flex hide-md>Card Number</th>
            <th flex>Customer</th>
            <th flex>Contact</th>
          </tr>
        </thead>
      <tbody flex>
        <tr layout="row" ng-repeat="message in vm.messageListFailures" class="pointer">
          <td flex hide-sm>
            <span class="status-label message-status-failed">Never Sent</span>
          </td>
          <td flex hide-md>
            £3500
          </td>
          <td flex hide-md>
            Bla
          </td>
          <td flex hide-sm>
            Added
          </td>
          <td flex hide-md>
            12345678910
          </td>
          <td flex>
            Mr John Smith
          </td>
          <td flex>
            [email protected]
          </td>
        </tr>
      </tbody>
    </table>
  </md-card>

Working codepen

When I resize the preview pane in my codepen sample, the columns do not hide at small and medium breakpoints. Also I noticed the table does not actually fill the available width of the card, I added layout-fill and flex to the table element but this makes no difference.

What am I missing here?

Thanks

Upvotes: 0

Views: 1446

Answers (1)

Nitin Dhomse
Nitin Dhomse

Reputation: 2612

refer following block.it works,

 <tr layout="row">
        <th  flex class="ng-hide">Status</th>
        <th  flex  class="ng-hide">Value</th>
        <th  flex class="ng-hide">Type</th>
        <th  flex  class="ng-hide">Action</th>
        <th  flex class="ng-hide">Card Number</th>
        <th  flex>Customer</th>
        <th flex>Contact</th>
  </tr>

Upvotes: 1

Related Questions