5

I'm looking for a way to display 4 cards with variable heights in a responsive manner on Angular 1.

On big screens it should show something like this:

+-------+ +-------+
|   1   | |   2   |
|       | |       |
+-------+ |       |
|   3   | |       |
|       | +-------+
|       | |   4   |
|       | |       |
+-------+ |       |
          |       |
          +-------+

On small screens should display like this:

+-------+
|   1   |
|       |
+-------+
|   2   |
|       |
|       |
|       |
+-------+
|   3   |
|       |
|       |
|       |
+-------+
|   4   |
|       |
|       |
|       |
+-------+

This works ok for the responsive requirement, but shows big spaces between cards on the same column if another card is higher

<div class="container" layout="row" layout-align="space-between" layout-wrap>
  <md-card class="details" id="d1" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d2" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d3" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d4" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
</div>

This works ok for the variable height requirement, but is not responsive (note that the order of the cards needs to be different here):

<div class="container" layout="col">
  <md-card class="details" id="d1" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d3" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
</div
<div class="container" layout="col">
  <md-card class="details" id="d2" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d4" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
</div>
marmor
  • 27,641
  • 11
  • 107
  • 150
  • I don't know if it is possible using just flexbox, and not having a specified container height in order to use column wrapping. Maybe you can take a look [here](https://stackoverflow.com/questions/39644585/using-flex-order-property-to-re-arrange-items-for-desktop-and-mobile-views) for related info. – lzagkaretos Jul 25 '18 at 09:51
  • 1
    use [grid layout](https://material.angularjs.org/latest/demo/gridList) – Praveen Soni Jul 27 '18 at 10:50

1 Answers1

0

Id recommend using the bootstrap libraries on top of your md-card

<div class="row">
 <div class="col-sm-6"><md-card>1</md-card></div>
 <div class="col-sm-6"><md-card>2</md-card></div>
 <div class="col-sm-6"><md-card>3</md-card></div>    
 <div class="col-sm-6"><md-card>4</md-card></div>
</div>
AlexanderDrysdale
  • 64
  • 4
  • i don't see how this solves the issue of having the cards in the wrong order (1,3,2,4) on small devices – marmor Aug 05 '18 at 12:23