I am trying to simulate a contact list in Angular Material. The div containing text should vertically align to the center of the avatar image on the left. I have tried several ways to add the layout-align but none of them seem to have any effect. I have included the code and the Plunker URL below to demonstrate my issue. I appreciate all help!
Plunker:
https://plnkr.co/edit/W18pV9fOE6BP9SuYQGAm?p=preview
HTML
<md-list>
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="md-list-item-text">
<h3>Babe Ruth</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div>
<h3>Mickey Mantle</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="md-list-item-text">
<h3>Derek Jeter</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
</md-list>
Add class="md-avatar" to your img tags.
Something like
<md-list-item class="md-2-line">
<img class="md-avatar" src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="md-list-item-text" layout="column">
<h3>Derek Jeter</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
The reason it's out of line is because of the margins that are set by the md-list-item-text css class. There may be a better way, but to suggest something different to what's already been suggested, you could override those styles and reset those margins.
1) Use this to reset the margin from within your style.css file:
md-list-item .no-margin.md-list-item-text {
margin: 0;
}
2) Set that no-margin class on each of the divs:
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="no-margin md-list-item-text">
<h3>Babe Ruth</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
3) Rearrange your style sheet imports for this to work:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
style.css must come after angular-material.min.css so that you can override it.
Demo Plunker
Related
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
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.
I'm using md-switch to display a toggle inside of an Angular app. When I click the line it's on, anywhere, the switch toggles. But I've got the switch on a line with other controls so I only want it to toggle when the actual switch is clicked, not some content outside it. How do I instruct it to behave like this?
Snippet:
<md-list-item class="md-1-line" ng-repeat="rule in vm.rules | filter:{name:groupedRule.name}">
<div style="width: 40px;">{{rule.threshold}}</div>
<div flex>
<md-slider min="10" max="40" ng-model="rule.threshold">
</md-slider>
</div>
<div style="width: 40px;">
<md-switch ng-model="rule.enabled"></md-switch>
</div>
Update
Here's a code pen demonstrating the issue: http://codepen.io/jsiegmund/pen/repwyR
Update
Issue #7937 on GitHub: https://github.com/angular/material/issues/7937#issuecomment-207793522
As of current date, the correct solution to this issue is to add class like this:
<md-list-item class="md-no-proxy">
This will prevent the entire line of list item to be clickable.
md-list-item documentation link
You could replace md-list-item with a div - CodePen
Markup
<div ng-controller="SwitchDemoCtrl" ng-app="MyApp">
<md-list>
<div layout="row" layout-align="center center">
<div style="width: 40px;"> {{ data.threshold }} </div>
<div flex>
<md-slider min="10" max="30" step="1" ng-model="data.threshold">
</md-slider>
</div>
<div layout-align="end center" flex-offset="5">
<md-switch ng-model="data.cb1" aria-label="Switch 1">
Switch 1: {{ data.cb1 }}
</md-switch>
</div>
</div>
</md-list>
</div>
I got following markup
<div layout="column" layout-align="space-around center" ng-cloak>
<div flex="85">
<div layout="row" layout-align="space-around center">
<div flex>
<md-button class="md-fab md-warn" ui-sref="settings">
<ng-md-icon icon="settings" style="fill:white"></ng-md-icon>
</md-button>
<span class="md-subhead">Configuraciones</span>
</div>
<div flex>
<md-button class="md-fab md-primary" aria-label="Eat cake" ng-click="watch()">
<ng-md-icon icon="play_arrow" style="fill:white"></ng-md-icon>
</md-button>
</div>
</div>
</div>
<div flex="15">
<div layout="row" layout-align="space-around center">
<div flex>
<img src="public/img/buap-logo.png" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
</div>
<div flex>
<img src="public/img/lke-logo.jpg" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
</div>
</div>
</div>
</div>
Producing following:
However I need the buttons div to take 85% of its parent container height, that's why I've added flex="85" attribute, while the div with images should be 15% of the height.
I'm not sure how I should set their properties to get it like that. According to docs that should make it work.
Flex only works with width. There's no way to use flex to tell the height of a div.
The property layout="column" only means the divs are showing from top to bottom, and row from left to right.
From material.angular.org
column: Items arranged vertically. max-width = 100% and max-height is the height of the items in the container.
You can use in the img tag a css style like 'height:15vh' and give it a try
I want to create nested list (tree) in my application exactly like below. Please suggest me how can i create list like this .
As of Angular 1.2 you can use ng-start/ng-end to create nested trees/iterate over nested lists.
<md-list flex>
<md-list-item style="margin-left: 10px;"ng-repeat-start="item in nestedList">{{item.id}}</md-list-item>
<md-list-item style="margin-left: 50px;" ng-repeat-end ng-repeat="child in item.children">{{child.id}}</md-list-item>
</md-list>
http://codepen.io/jdeyrup/pen/JRPNyW
Unfortunately, as to the last releases of angular material, there is no such directive to make a tree menu like that, you should combine different directive such as the sidebar and the vertical menu.
I used the sidebar in my project:
<section class="wrapper" layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z3 background-red" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar>
<img class="logo" src="images/logo.png" />
</md-toolbar>
<md-content ng-controller="LeftCtrl">
<menu></menu>
<md-button ng-click="close()" class="md-primary" hide-gt-md>
Close Sidenav Left
</md-button>
</md-content>
<div flex></div>
<div class="copy">Copyright © 2015</div>
</md-sidenav>
<md-content class="wrapper" flex>
<div class="wrapper ngview-wrapper" layout="column" layout-fill layout-align="top center" ng-view></div>
<div flex></div>
</md-content>
</section>
You won't need the part that handle opening and closing of the sidebar.
Inside the menu directive you will be able to put everything you want as menu