CODEWITHSUNDEEP
cssmaterial-designangular-material
Georgi Antonov
Georgi Antonov

Reputation: 1641

Angular Material cards inside properly aligned divs must be with same height

My problem is that I want to somehow set the height of the cards to be equal so no matter how long is the text of a card the other cards with less text will stretch to be with the same height as the biggest card. I'm nesting md-card inside the repeating div, because I set padding to the div and then the md-card's are separate with space between them just like i want. But not with equal height.

The other option is to remove the md-card element and set white-frame to the repeating divs, but then I wont have space between white-frame boxes.

Here is the plunker url : http://plnkr.co/edit/NDdYvHhuvhTie2Sy9Mg5?p=preview

Here is the html :

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <style>
    .category-card md-card img{
    width: 100%;
    height:auto;
    padding: 0;
  }
  .category-card md-card h3{
      -webkit-margin-before: 5px;
      -webkit-margin-after: 5px;
  }
  .category-card md-card p{
      font-size: 1.1em;
      word-wrap: break-word;
  }
  </style>

</head>
<body ng-app="BlankApp" ng-cloak>
  <section layout-padding>
    <div layout="row" layout-wrap class="category-wrapper">
        <div flex-xl="25"
             flex-lg="33"
             flex-md="50"
             flex-sm="50"
             flex-xs="100"
             layout-padding
             class="category-card"
             ng-repeat="category in [{text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB'}]">

                <md-card ui-sref="....">
                <img src="http://graywolfseo.com/wp-content/uploads/choosing-urls.jpg" class="md-card-image" alt="{{category.category_image_alt}}">
                <md-card-title>
                    <md-card-title-text>
                        <h3 class="md-headline">TEXTTTTTTTTTTT</h3>
                    </md-card-title-text>
                </md-card-title>
                <md-card-content>
                    <p>
                        {{category.text}}
                    </p>
                </md-card-content>
                </md-card>
        </div>
    </div>
</section>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

Upvotes: 1

Views: 462

Answers (1)

camden_kid
camden_kid

Reputation: 12813

I would suggest using md-grid-list for this problem - Plunker

Markup

  <md-grid-list
    md-cols-xl="4"
    md-cols-lg="3"
    md-cols-md="2"
    md-cols-sm="2"
    md-cols-xs="1"
    md-row-height="1:1"
    md-gutter="20">
    <md-grid-tile ng-repeat="category in [{text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'Heloooooooooooooooooooooooooooooo'},
             {text:'BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB'}]">
      <md-card ui-sref="...." layout-fill>
        <img src="http://graywolfseo.com/wp-content/uploads/choosing-urls.jpg" class="md-card-image" alt="{{category.category_image_alt}}">
        <md-card-title>
            <md-card-title-text>
                <h3 class="md-headline">TEXTTTTTTTTTTT</h3>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <p>
                {{category.text}}
            </p>
        </md-card-content>
      </md-card>
    </md-grid-tile>
  </md-grid-list>

CSS

p {
  word-break: break-all;
}

Docs

https://material.angularjs.org/latest/api/directive/mdGridList https://material.angularjs.org/latest/api/directive/mdGridTile

Demos

https://material.angularjs.org/latest/demo/gridList

Upvotes: 2

Related Questions