How can I left-align elements inside a md-button? Sample code:
<md-button>
<div md-ink-ripple layout="row">
<div class="inset">
<ng-md-icon icon="info"></ng-md-icon>
</div>
<div class="inset">
Title
</div>
</div>
</md-button>
You just have to override the CSS property text-align:center by text-align:left of md-button
Here the result on the MD Demo Page :
Just use this style element:
<md-button md-no-ink="" class="md-primary" align="center" style="left:712px";>
Search
</md-button>
css
Give you html some id first
<ng-md-icon id="SomeID" icon="info"></ng-md-icon>
Then in your css do
#SomeID{
text-align:left;
}
that should sort you out.
Related
I'm using AngularJs 1.7, and i've created a dropdown element that i want to add it to md-dialog, the problem is that my element (my-popup) always remains in the limits of the md-dialog - like in here
I want to achieve the same behaviour of the date-picker - as you can see - it's appears in the correct place and over the md-dialog - i wonder how it can done.
I've tried to append the popup to the body , but this way messed up the position of the popup - i guess there is a better way.
$scope.open = function(){
$scope.isShowMyPopUp = !$scope.isShowMyPopUp;
if(!!$scope.isShowMyPopUp){
let modalContainer = $('#myPopUp');
modalContainer.detach();
modalContainer.appendTo('body');
}
Here is the Example
You need to put your "myPopUp" div inside the dialog-content directly and modify your css like the following
HTML :
<md-dialog aria-label="Mango (Fruit)" class="mango-dialog">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="my-popup" ng-show="isShowMyPopUp" id-"myPopUp">
<div ng-repeat="item in daySelect">
<md-button class="md-raised md-primary" ng-class="{'selected':item.isSelected}" ng-click="select(item)"> {{item.text}}</md-button>
</div>
</div>
<div class="md-dialog-content">
<div layout-gt-xs="row">
<div flex-gt-xs>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div flex-gt-xs style="position:relative;">
<h4>my-popup</h4>
<md-button class="md-raised md-primary" ng-click="open()">Open</md-button>
</div>
</div>
</div>
</md-dialog-content>
</form>
</md-dialog>
CSS :
.my-popup{
position:absolute;
top: 48px;
left: 104px;
width:250px;
height:250px;
background-color:gray;
z-index: 999;
overflow: auto;
}
md-dialog{
width:40%;
}
.selected {
background-color:green!important;
}
.mango-dialog {
overflow: visible;
}
I added mango-dialog class to your dialog to allow overflow , also I added z-index to the pop up to make sure it is on top
here is a working example
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
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