I'm trying to figure out why my md-card-title-text Doesn't render right,
I don't have any extra css on it, just default angular-material
I'm using te following code to show it:
<md-card>
<md-card-header>
<md-card-avatar>
<img class="md-user-avatar" src="https://material.angularjs.org/HEAD/img/100-2.jpeg" />
</md-card-avatar>
<md-card-header-text>
<span class="md-title">User</span>
<span class="md-subhead">subhead</span>
</md-card-header-text>
</md-card-header>
<md-card-title>
<md-card-title-text>
<span class="md-headline">In-card mixed actions</span>
<span class="md-subhead">Reversed</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="start center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
<md-card-icon-actions>
<md-button class="md-icon-button" aria-label="toggle">
<md-icon md-svg-icon="md-toggle-arrow"></md-icon>
</md-button>
</md-card-icon-actions>
</md-card-actions>
</md-card>
here is a screenshot showing the issue:
I had the same error and could not reproduce it within Codepen or anywhere else. After a while of trying I figured out I forgot adding <!DOCTYPE html> to the html file, which solved the problem.
Best Regards,
Benjamin
Related
http://codepen.io/Touhma/pen/qqvRzb
Why Is the datepicker Angular not working with 1.6.0 ?
I tried many thing but none are working ...; the initializer of the datepick just show me a whitescreen exactly like that :)
`
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Maquette recherche</span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout="row"
layout-align="end center"
class="layout-align-end-center layout-row">
<md-button class="md-raised md-primary">
<span class="fa-stack fa-lg"><i class="fa fa-search fa-stack-1x"></i></span>
<md-tooltip md-direction="top">
Lancer la recherche
</md-tooltip>
</md-button>
</md-card-actions>
<md-card-content>
<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="research.myDate" md-placeholder="Enter date"></md-datepicker>
</md-content>
</md-card-content>
</md-card>
`
It seems like the last release in Master fixes the issue:
v1.1.1-master-0b72ab9
Or
According to #10168 set:
$compileProvider.preAssignBindingsEnabled(true);
I am showing cards using ng-repeat. The data and all is coming fine but somehow i am struggling to have 3 cards in a row and go to the next row for the other items.
My ng-repeat code is as follows:
<md-content ng-repeat="agent in agents|filter:search" layout="row">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-subhead">{{agent.RCustId}}</span>
<span class="md-headline">{{agent.FullName}}</span>
<span class="md-subhead">{{agent.ContactNum}}</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
{{agent.address}}
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button>Collect {{agent.balance_amount}}</md-button>
</md-card-actions>
</md-card>
</md-content>
I want the card side by side but these are coming one per each line.
Where is the issue and how to resolve it please.
Try surrounding md-card with a <div> with layout-wrap - you can then use flex=".." - with number corresponding to number of columns you want in row.
See layout options documentation here.
<div class='md-padding' layout="row" layout-wrap>
<md-card flex="33" ng-repeat="agent in agents|filter:search">
See answer here for more detail and examples.
Add the content inside section
<section layout="row" layout-sm="column" layout-wrap>
// your code
</section>
Working example http://plnkr.co/edit/hE38nAAJT35UJL71JGoS?p=preview
I have nested virtual repeats and it renders without problem, but I am having strange scrolling problem. If I scroll down, I cannot view all items and it jumps to another parent item. Well, it is hard to explain.
I assume that problem is the predefined height for parent items. Virtual repeat sets the same height for each item, but mine is not same height. That is why I am having the scrolling problem, but I could not find any solution that makes a dynamic height for each item(not rendering for scrolling).
I have created a pen and please try to scroll down slowly and you will understand what I mean.
Here is the link: https://codepen.io/semihgk/pen/Pzrwkj
<div ng-controller="AppCtrl as ctrl" class="content virtualRepeatStoreList" ng-app="MyApp">
<md-virtual-repeat-container class="vertical-container" style="height:550px">
<div md-virtual-repeat="item in ctrl.items">
<md-card flex="">
<md-card-title>
<md-card-title-text>
<span class="md-display-2">{{ item.nbr }}</span>
</md-card-title-text>
</md-card-title>
<md-list style="overflow:auto;height:auto;" flex ng-cloak layout="column">
<md-divider></md-divider>
<md-list-item layout="row" class="noright">
<md-subheader flex>Item</md-subheader>
</md-list-item>
<md-list-item ng-repeat="it in item.items" style="max-height:40px;overflow:hidden;" class="noright">
<p>{{ it.nbr }}</p>
<md-checkbox class="md-secondary" ng-model="it.checked"></md-checkbox>
</md-list-item>
</md-list>
</md-card>
</div>
</md-virtual-repeat-container>
</div>
If anyone has any idea, I would be so appreciated. Thank you very any advice!
I'm quite new in angular-md and trying to make obvious thing - sidenav with cards on the right. The code is not that hard http://codepen.io/anon/pen/qZPRmq
<body ng-app="BlankApp" ng-cloak layout="column">
<div flex layout="row">
<md-sidenav md-is-locked-open="true" class="md-sidenav-left md-whiteframe-z2" layout="column">
Some form here
</md-sidenav>
<!-- Container #4 -->
<md-content flex layout="column" class="md-padding" layout-padding>
<md-grid-list flex md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile flex>
<md-card>
First card here
</md-card>
<md-card>
Second card here
</md-card>
</md-grid-tile>
</md-grid-list>
</md-content>
</div>
But the problem is that md-grid-tile runs away from the md-content block and get's overlapped by sidenav (and sometimes by md-toolbar). What i'm doing wrong?
Change
<md-grid-tile flex>
<md-card>
First card here
</md-card>
<md-card>
Second card here
</md-card>
</md-grid-tile>
to
<md-grid-tile>
<md-card>
First card here
</md-card>
</md-grid-tile>
<md-grid-tile>
<md-card>
Second card here
</md-card>
</md-grid-tile>
Currently I have requirement where I need to convert HTML to PDF , since I'm using angular material inputs to render UI, angular material tags are not recognized by the PDF converter tools.
Need to know if there is any way or some setting within framework where it will render the angular material tags as HTML in browser?
below is HTML which renders angular material
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding" layout="row" layout-wrap layout-align="center start" layout-xs="column">
<div flex="50" flex-sm="100" flex-xs="100" layout="column">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Large</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</md-content>
</div>