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">
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'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 haven't found an answer that works for me... Here's my code. My content doesn't scroll. I'm getting my ng-view from a basic template. It's just a bunch of lorem ipsum intended to extend past the end of the page so that I can test this code.
What do I need to do to make my content scrollable? I can't scroll the page at all.
I am running this on a grunt serve dev server. Everything was installed via bower. Ang-material is included properly. Everything looks like it is supposed to, it just doesn't scroll.
(As a side note, my FAB was in it's proper place at the bottom-right last night, I just decided that this is more important so I'm not focusing on it's position right now. It's floating in the middle-right of the page.)
<body ng-app="webApp" layout="column">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<md-toolbar class="md-whiteframe-4dp">
<div class="md-toolbar-tools">
<!-- left side -->
<span flex></span>
<!-- right side -->
<md-button class="md-raised" aria-label="Learn More" ng-href="#/contact">
Contact Me
</md-button>
</div>
</md-toolbar>
<md-content layout="row" flex>
<md-content id="content" flex>
<md-content class="container md-whiteframe-6dp">
<md-content hide show-gt-sm flex layout-padding class="main-text main-view">
<div ng-view></div>
</md-content>
<md-content hide show-sm show-xs flex layout-padding class="main-text">
<div ng-view></div>
</md-content>
</md-content>
</md-content>
<div ng-controller="FabCtrl as fab" class="lock-size" layout-align="end end">
<div class="corner-pad">
<md-fab-speed-dial md-open="fab.isOpen" md-direction="{{fab.selectedDirection}}" ng-class="fab.selectedMode" ng-mouseenter="fab.isOpen=true" ng-mouseleave="fab.isOpen=false" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-primary md-hue-4 md-whiteframe-4dp" ng-href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Call Me</md-tooltip>
<ng-md-icon icon="phone" size="25"></ng-md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="email" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="mailto:jacobkdick#gmail.com">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Email Me</md-tooltip>
<ng-md-icon icon="email"></ng-md-icon>
</md-button>
<md-button aria-label="phone" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Follow Me</md-tooltip>
<ng-md-icon icon="twitter"></ng-md-icon>
</md-button>
<md-button aria-label="github" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="https://github.com/jacobkdick" target="_blank">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Fork Me</md-tooltip>
<ng-md-icon icon="github-circle"></ng-md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
</md-content>
</body>
EDIT: Just applied the overflow scroll tags on my css. Here's a funky result from the bottom-right corner. Both scrollbars are disabled
scrollbars overlay disabled << click here for the picture
I have an issue with FAB that seems to initialize open and I can't close it. The menu items also seem to be consuiming space on the line rather than floating over it.
Not sure what I did 'wrong'.
http://codepen.io/ed4becky/pen/eJwYvw
<md-dialog aria-label="Testing FAB in Dialog">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Testing FAB in Dialog</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 style="max-width:800px;max-height:810px; ">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding" style="width:600px;">
<md-fab-speed-dial md-direction="left" ng-class="md-fling" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
X
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
No
</md-button>
<md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
Yes
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</md-content>
</md-tab>
</md-tabs>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="cancel()" style="margin-right:20px;">
Done
</md-button>
</md-dialog-actions>
</md-dialog>
Here you have a working plunker
Just a few things to keep in mind:
As you post in a comment, update to an up to date angular-material version. Plunker is using the latest 1.1.1 relase
ng-class accepts an expression as parameter, so you should change ng-class="md-fling" per ng-class="'md-fling'" if you don't bind the value to a controller variable.
When you call the $mdDialog.show(...) service, you are setting parent: angular.element(document.body). Not sure if you really need this for your use case, but if you remove it, it works well.
Code, just for reference:
View:
...
<md-fab-speed-dial md-direction="left" ng-class="'md-fling'" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
X
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
No
</md-button>
<md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
Yes
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
...
Controller:
...
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'tabDialog.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
});
};
...
Hope it helps
I want to built a slide out menu for my application using angular material.
I have certain tabs, each of which will have a slide-out menu with different content. I have implemented this in the following manner:
<md-tab ng-repeat="tab in categories"
ng-disabled="tab.disabled"
label="{{tab.title}}"
md-on-select="setArray(tab.title,0)">
<!--Include a dropdown of sub-categories here -->
<div layout="row">
<md-menu id="sub-cat-button">
<md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="Open sample menu">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</md-button>
<md-menu-content width=6>
<md-menu-item ng-repeat="sub_cat in tab.sub_cat">
<md-button ng-click="setArray(sub_cat,1)">{{sub_cat}}</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<ol class="breadcrumb" id="breadcrumb">
<li ng-repeat="link in bread">{{link}}</li>
</ol>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button ng-click="openRightMenu()">
<i class="material-icons">keyboard_arrow_right</i>
</md-button>
</md-sidenav>
<md-content>
<md-button ng-click="openRightMenu()">
<span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
</md-button>
</md-content>
</div>
<div class="demo-tab tab{{$index%4}}" id="scrollable-tabs">
<div class="row" infinite-scroll="loadMore()" infinite-scroll-disabled="busy">
<div ng-repeat="p in products">
<h3><div class="well">{{p.id}}</div></h3>
</div>
</div>
<div ng-show="busy">Loading more products....</div>
<br/>
</div>
</md-tab>
The problem here is that, the menu slides out and can be seen only for tab 1. If I go to tab 5 and click on the filter button to open that menu, the menu is not seen slid out with tab 6 , but it has been already slid out for tab 1. you can view it slide out when you go to tab 1.
How do I make it visible for each tab, because the content of the slide out menu is dependent on the tab which is opened?