I want to design a page just like the official angular-material website . The toolbar and side nav is fixed while the main content scrolls . I am trying to do that for few hours but haven't been got any success .
here is my html template for profile
profile.html
<div layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2 profileSidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar layout="row" class="md-hue-2">
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
</md-toolbar>
<md-content>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" class="profileToolBar">
<button ng-click="toggleSidenav('left')" hide-gt-sm>
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools">Hello World</h1>
</md-toolbar>
<md-content layout="column" flex class="md-padding">
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</div>
</div>
sidenav and toolbar has been given custom class with position:fixed ; values , but after making position fixed for sidenav the toolbar and content hides behind it
you can ise $mdSticky to make element fixed
app.directive('sticky', function($mdSticky, $compile) {
var SELECT_TEMPLATE =
'<md-content><md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> <md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> </md-content>';
return {
restrict: 'A',
replace: true,
//template: SELECT_TEMPLATE, // you can use template HTML or load HTML with templateURL as we do it in next line
templateUrl:appInfo.template_directory+'templates/sticky-sidebar.directive.html',
link: function(scope,element) {
$mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
}
};
});
as described here:
https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky
I solve it with this code:
index.html:
<body layout="column">
<div flex layout="column" ng-include="'app/layout/shell.html'"></div>
</body>
shell.html
<div layout="row" flex style="height: inherit; overflow: hidden; background-color: transparent" ng-controller="Shell" layout-fill class="fondo">
<div ng-include="'app/layout/left-side-nav.html'"></div>
<md-content flex layout="column" role="main" style="height: inherit; background-color: transparent; " class="">
<div ng-include="'app/layout/app-toolbar.html'"></div>
<div layout="row" layout-align="space-around" ng-if="dataLoading.init" class="loader">
<md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
</div>
<md-content flex style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init" >
<div ui-view="main" class="noscrollbar" style=" margin:auto"></div>
</md-content>
</md-content>
<div ng-include="'app/layout/right-side-nav.html'"></div>
</div>
Use this attribute md-is-locked-open="true" on <md-sidenav> tag.
Related
Part of my html file below:
<md-content class="md-padding" layout="row" layout-wrap>
<md-card flex="30" ng-repeat="classified in classifieds" class="classified">
<img src={{classified.image}} class="md-avatar"></img>
<md-card-content>
<div class="classified-info" ng-hide="showContact">
<h2 class="md-title">{{classified.title}}</h2>
<h3>{{classified.price | currency}}</h3>
<p>{{classified.description}}</p>
</div>
<div class="classfied-contact" ng-show="showContact">
<p><md-icon class="mdi mdi-account"></md-icon>{{classified.contact.name}}</p>
<p><md-icon class="mdi mdi-phone"></md-icon>{{classified.contact.phone}}</p>
<p><md-icon class="mdi mdi-account"></md-icon>{{classified.contact.email}}</p>
</div>
<div layout="row">
<md-button ng-hide="showContact" ng-click="showContact=true">Contact</md-button>
<md-button ng-show="showContact" ng-click="showContact=false">Details</md-button>
<md-button ng-hide="showAdmin" ng-click="showAdmin=true">Admin</md-button>
<md-button ng-show="showAdmin" ng-click="showAdmin=false">Close</md-button>
</div>
<div class="classified-admin" ng-if="showAdmin">
<h3>Admin</h3>
<div layout="row">
<md-button class="md-primary" ng-click="editClassifieds(classified)">Edit</md-button>
<md-button class="md-warn">Delete</md-button>
</div>
</div>
</md-card-content>
</md-card>
</md-content>
Despite having layout-wrap in my md-content tag, I have some content of the card spilling over when I click on an expanding button inside it(see below image):
I am trying to reproduce this codepen with Angular. However, Angular is not backwards compatible. How can this be done with Angular?
<div ng-controller="AppCtrl" class="carddemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<md-card layout="row"
layout-sm="column">
<div flex-gt-sm="33"
layout-align="center center"
layout="column">
<img src="http://i.imgur.com/2uL6DQ8.jpg"
flex
class="md-card-image">
</div>
<div layout="column" flex>
<md-card-content flex>
<h2 class="md-title">Paracosm</h2>
<p>
lorem ipsum
</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</div>
</div>
</md-card>
<md-content>
</div>
For those who are interested in a horizontal card, just use flexbox and set the layout to row on the parent div.
<md-card>
<md-card-header>
<md-card-title> Title </md-card-title>
<md-card-subtitle> Subtitle</md-card-subtitle>
</md-card-header>
<div fxLayout="row">
<img md-card-image src="" fxFlex="25">
<span fxFlex="10"></span>
<md-card-content fxFlex="65">
<p>
content
</p>
</md-card-content>
</div>
<md-card-actions>
<button md-button>Action 1</button>
<button md-button>Action 2</button>
</md-card-actions>
</md-card>
Angular 1.x does not support material 2. If you want to use cards in material 2 then you can look here https://material.angular.io/components/component/card
I'm developing a AngularJS (v1.5) application using Angular Material and I'm stuck with the implementation of the layout. This is basically a fixed-height header, followed by variable-height content, followed by a fixed-height footer. The complete page should scroll (including the header) and the footer should be pushed to the bottom of the window when there is not enough content to fill the space between header and footer.
I've created a pen with the code I've got so far (replaced components with div's and introduced all the intermediate div's inserted by Angular) but when I decrease the height of the window, the content is collapsed to a height of zero instead of maintaining the height of the content and showing a scrollbar.
The problem is probably with the .main CSS class but I cannot figure out what I should be putting there.
The HTML:
<body ng-app="app">
<!-- ui-view div -->
<div layout="column" layout-fill>
<!-- component div -->
<div layout-fill>
<!-- my own div around the page content -->
<div layout="column" layout-fill>
<!-- header component div -->
<div flex="none">
<header flex="none">
<md-toolbar>
<div class="container">
<div class="md-toolbar-tools" layout="row" layout-align="center center">
<div flex></div>
<h1>HEADER</h1>
<div flex></div>
</div>
</div>
</md-toolbar>
</header>
</div>
<!-- content div -->
<div flex class="container main">
<h2>CONTENT</h2>
</div>
<!-- footer component div -->
<div flex="none">
<footer flex="none">
<md-toolbar>
<div class="container">
<div class="md-toolbar-tools" layout="row" layout-align="center center">
<div flex></div>
<h1>FOOTER</h1>
<div flex></div>
</div>
</div>
</md-toolbar>
</footer>
</div>
</div>
</div>
</div>
</body>
The CSS:
header, footer {
md-toolbar {
height: 100px;
min-height: 100px;
background-color: #C8C8C8;
.md-toolbar-tools {
height: 100px;
min-height: 100px;
}
}
}
.container {
width: 600px;
margin: 0 auto;
}
.main {
background-color: #E8E8E8;
}
And the JavaScript:
angular.module("app", ['ngMaterial']);
The pen: http://codepen.io/kdbruin/pen/ZLwmvW
You can use flex="grow" with min-height on container to achieve the desired result.
Here is the Code
<div layout="column" flex="grow" style='background-color:green'>
<md-toolbar>
<div flex="10">
<div class="md-toolbar-tools" layout="row" layout-align="center center">
<div flex></div>
<h1>HEADER</h1>
<div flex></div>
</div>
</div>
</md-toolbar>
<div flex="grow" style='background-color:pink; min-height:1000px'>
<div ng-repeat="no in [0,1,2,3,4,5,6,7,8,9]">
<h2>CONTENT - {{no}}</h2>
</div>
</div>
<div flex="10" style='background-color:blue'>
<div flex></div>
<h1>FOOTER</h1>
<div flex></div>
</div>
Here is the working Codepen.
<md-content flex class="md-padding page-content">
<div ui-view flex layout="column">
<div class="center" layout="row" flex>
<md-content layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
In my code above, the outermost md-content occupies the complete page; however with the ui-view gived column layout and flex class, I expected it to occupy the complete height of the page, however it occupies the height consumed by the content only.
Can you please help with the error in the code, so ui-view can occupy the complete page?
Here you go - CodePen
You need to utilise layout-fill. From the docs
In order for this to work an upper element must occupy the full screen. In the above example it is <body>.
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill>
<md-content layout-fill flex class="md-padding page-content">
<div ui-view flex layout="column" layout-fill>
<div class="center" layout="row" flex>
<md-content id="list" layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities" flex="none">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content id="details" layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
</div>
CSS
.page-content {
background: yellow
}
#list {
overflow-y: auto;
overflow-x: hidden;
}
How to achieve the following layout (with "plus" icon below the card layout) ? :
I tried the following code :
<section layout="column" style="background-color: black;">
<md-card flex="100">
<md-card-header style="background-color: greenyellow; ">
<h2>Card headline</h2>
</md-card-header>
<md-card-content class="inline">
Card content
</md-card-content>
</md-card>
</section>
How's this?
<div class="demo" ng-app="MyApp">
<md-content class="md-padding" flex-gt-xs="50">
<div layout="column" layout-align="center center">
<md-card>
<md-card-title>
...
</md-card-title>
</md-card>
<md-button class="md-fab" aria-label="Eat cake">
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>
</div>
</md-content>
</div>
Here's a Codepen modified from one of the original card examples.