CODEWITHSUNDEEP
cssflexboxangular-material
yannick1976
yannick1976

Reputation: 11575

Table-like layout using angular material design

Is there any way to let angular material design layouts align both lines and columns, like a table would ?

To make things clear, what I would like is to align cells in the table below.

Of course I could add some flex="xxx" but the problem is I don't want to fix the width of the columns.

I'm also interested in a css / flexbox solution.

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <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>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <script type="text/javascript">    
    angular.module('BlankApp', ['ngMaterial']);
  </script>

  <style>
    .myCell {
      border: solid black 1px;
      padding: 10px;
    }
  </style>
  <div layout="column">
    <div layout="row">
      <div class="myCell">ROW 1, CELL 1</div>
      <div class="myCell">ROW 1, CELL 2</div>
      <div class="myCell">ROW 1, CELL 3</div>
    </div>
    <div layout="row">
      <div class="myCell">A LONGER CELL</div>
      <div class="myCell">ROW 2, CELL 2</div>
      <div class="myCell">ROW 2, CELL 3</div>
    </div>  </div>
</body>
</html>

Upvotes: 0

Views: 6220

Answers (1)

camden_kid
camden_kid

Reputation: 12813

Is this the kind of thing you mean? - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column">
  <div layout="column" flex>
    <div layout="row" flex>
      <div class="myCell" flex>ROW 1, CELL 1</div>
      <div class="myCell" flex>ROW 1, CELL 2</div>
      <div class="myCell" flex>ROW 1, CELL 3</div>
    </div>
    <div layout="row" flex>
      <div class="myCell" flex>A LONGER CELL</div>
      <div class="myCell" flex>ROW 2, CELL 2</div>
      <div class="myCell" flex>ROW 2, CELL 3</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions