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);
Related
Can you please tell me if it is possible to implement navigation as in the following example? Only with the Angular Material. Thank you.
http://plnkr.co/edit/Ksfo7fnSB0c4DH6egE3S?p=preview&preview
<body ng-controller="MainCtrl" layout="row">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="true">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" class="main-ctr md-padding">
<div ng-show="mainMenu" class="mainmenu"> <md-list>
<md-list-item>
<md-icon aria-label="home" class="material-icons"
style="">home
</md-icon>
<p class="md-body-2 side-nav-item">Home</p>
</md-list-item>
<md-list-item ng-click="nav('back')">
<md-icon aria-label="settings" class="material-icons">settings
</md-icon>
<p class="md-body-2 side-nav-item">Settings</p>
<md-button class="md-secondary md-icon-button" ng-click="nav('back')">
<md-icon aria-label="chevron_right" class="material-icons">chevron_right</md-icon>
</md-button>
</md-list-item>
</md-list>
</div>
<div ng-show="submenu" ng-class="{donotshow:donotshow, submenu: true}" >
<md-list>
<md-list-item ng-click="nav('main')">
<md-icon aria-label="chevron_left" class="material-icons"
ng-click="nav('main')">chevron_left
</md-icon>
<p class="md-body-2 side-nav-item">Back</p>
</md-list-item>
<md-list-item>
<md-icon aria-label="people" class="material-icons"
style="">people
</md-icon>
<p class="md-body-2 side-nav-item">My Profile</p>
</md-list-item>
<md-list-item>
<md-icon aria-label="people" class="material-icons"
style="">people
</md-icon>
<p class="md-body-2 side-nav-item">account</p>
</md-list-item>
</md-list>
</div>
</md-content>
</md-sidenav>
</body>
</html>
Perhaps there is a decent solution out of the box.
It should be possible to implement it by using stepper API.
https://material.angular.io/components/stepper/overview
I am using a md-select in a md-dialog. The drop down content has a scroll bar but I need the window to scroll.
Here is my code:
Dialog (in script element):
<md-dialog aria-label="Mango (Fruit)">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Click Select menu and then scroll the page</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="md-dialog-content" layout="row" layout-align="center">
<md-input-container flex="80">
<label>Selcet your option</label>
<md-select ng-model="size">
<md-option value="option 1">option 1</md-option>
<md-option value="option 2">option 2</md-option>
<md-option value="option 3">option 3</md-option>
</md-select>
</md-input-container>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
More on Wikipedia
</md-button>
<span flex></span>
<md-button ng-click="answer('not useful')">
Not Useful
</md-button>
<md-button ng-click="answer('useful')">
Useful
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
The issue is that the content of the md-select is moving along with the scrolling. Can anyone suggest me a fix for this issue? I need both the window and md-select content to scroll.Thanks in advance.
Codepen
I would like to show a hidden Inputs when user click show button in angular material 1.4. For example When collapsed it would
When user click on the show button it would look
Following is the code i am fiddling with.
I would like to bring the input Boxes below the Header. It seems with the nested Div Block it is not working as expected. Can anyone help?
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Schedules">
<md-content class="md-padding">
<md-content class="md-padding">
<md-list-item ng-repeat="schedule in schedules">
<div layout="row">
<md-button class="md-icon-button" aria-label="Messages" ng-click="expandSchedule($index)">
<md-icon md-svg-src="Client/app/resources/images/icons/svg/expand_more.svg" ng-show="!schedule.showSchedule"></md-icon>
<md-icon md-svg-src="Client/app/resources/images/icons/svg/expand_less.svg" ng-show="schedule.showSchedule"></md-icon>
</md-button>
<p>{{schedule.humanReadableFormat}}</p>
<md-button class="md-icon-button pull-right" aria-label="Messages" ng-click="delSchedule($index)">
<md-icon md-svg-src="Client/app/resources/images/icons/svg/close.svg"></md-icon>
</md-button>
</div>
<div layout="row" ng-show="schedule.showSchedule">
<md-input-container>
<label>Title</label>
<input ng-model="user.title">
</md-input-container>
<md-input-container>
<label>Email</label>
<input ng-model="user.email" type="email">
</md-input-container>
</div>
<md-divider></md-divider>
</md-list-item>
</md-content>
<div class="md-padding">
<section layout="row" layout-align="center center" layout-wrap>
<md-button class="md-raised md-warn" aria-label="Add Schedule" ng-click="clickAddSchedule()">Add New Schedule</md-button>
</section>
</div>
</md-content>
</md-tab>
</md-tabs>
You didn't write exactly why it doesn't work as expected. But I guess you have a problem with using row twice:
<div layout="row">
...
<div layout="row">
Maybe try this:
<div layout="row">
<div flex>LEFT</div>
<div flex ng-class="{hide: !schedule.showSchedule}">RIGHT</div>
</div>
I'm trying to create angular material sidenav with list of menu items. When Im running the code on local machine, Each md-list-items takes fullpage width and sidenav have long scroll bar.
But When I run the same code on codepen.io, It displayed correctly.
<section layout="row" ng-controller="AppCtrl">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" >
<md-toolbar ng-controller="LeftCtrl">
<div class="md-toolbar-tools">
<h1>Sidenav Right</h1>
<span flex></span>
<md-button class="md-icon-bitton" aria-label="Close Menu" ng-click="close()">
<md-tooltip md-direction="right">Close this menu</md-tooltip>
<md-icon md-font-icon="material-icons">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-content flex role="navigation">
<md-list>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
</md-list>
</md-content>
</md-sidenav>
<md-content flex>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()" ng-hide="isOpenLeft()">
<md-icon md-font-icon="material-icons">menu</md-icon>
</md-button>
<h2>
<span>Application Title</span>
</h2>
</div>
</md-toolbar>
</md-content>
</section>
Here is the codepen:http://codepen.io/nhere/pen/yOwJxE
Try to use the following structure
<md-list>
<md-item>
<md-item-content>
[Content Here]
</md-item-content>
</md-item>
</md-list>
I've followed the demo as given in the angular material site.
https://material.angularjs.org/latest/#/demo/material.components.menu
I'm facing a problem where the simple dropdown menus and speed dials are just static and not initalized.
Can't seem to figure out what I am missing.
<div layout="column">
<md-content class="md-padding" layout="column">
<div class="lock-size" layout="row" layout-align="center center">
<md-fab-speed-dial md-open="false" md-direction="up"
ng-class="md-fling">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<i class="fa fa-car"></i>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="twitter" class="md-fab md-raised md-mini">
<i class="fa fa-car"></i>
</md-button>
<md-button aria-label="facebook" class="md-fab md-raised md-mini">
<i class="fa fa-car"></i>
</md-button>
<md-button aria-label="Google hangout" class="md-fab md-raised md-mini">
<i class="fa fa-car"></i>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-content>
</div>
I changed the ng-class attribute on the <md-fab-speed-dial> tag to simply class, and it works now. Have a look at this link from the Angular Material site.
In your case, you should have:
<md-fab-speed-dial md-open="false" md-direction="up" class="md-fling">