Skip to content

Instantly share code, notes, and snippets.

@plugn
Forked from anonymous/index.html
Last active February 9, 2016 11:43
Show Gist options
  • Save plugn/4d1e2f216351301881bc to your computer and use it in GitHub Desktop.
Save plugn/4d1e2f216351301881bc to your computer and use it in GitHub Desktop.
ng md flex column
<html lang="en" >
<head>
<!--http://jsbin.com/gapatikuwo -->
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<style rel="stylesheet">
body {
height: 100%;
}
.wrapper {
width: 300px;
background-color:#eee;
padding: 10px;
height: inherit;
}
.wrapper > div {
background-color: #fff;
border: 5px dotted #aaa;
padding: 10px;
}
</style>
<div layout="column" class="wrapper">
<div style="overflow-y:auto;">
a<br>
b<br>
c<br>
a<br>
b<br>
c<br>
</div>
<div flex style="border: none;"></div>
<div style="min-height:50px; max-height: 200px;">
0<br>
0<br>
0<br>
0<br>
0<br>
0<br>
0<br>
</div>
</div>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment