I'm designing a simple user interface in Angular Material for a web application, but I have the following problem with the <md-sidenav> directive:
The md-is-locked-open attribute seems not to be working. I tried to set it to false, but the sidenav is anyway displayed, I tried to set it using $mdMedia service, but the sidenav is not hidden on smaller screens. How can I make it work? My HTML below:
<body ng-app="test" layout="column">
<md-toolbar class="md-toolbar-tools" layout-align="center">
<p>EASYRASH</p>
</md-toolbar>
<div layout="row" flex>
<md-sidenav md-is-locked-open="$mdMedia('gt-md')" class="md-sidenav-left md-whiteframe-6dp" md-component-id="left">
</md-sidenav>
</div>
</body>
And JS:
var app = angular.module("test", ['ngMaterial']);
As discussed in the comments, the angular material version he was using was outdated. When he updated it everything started working as expected =)
Related
I copied this sidenav demo from the angular material docs.
https://material.angularjs.org/latest/demo/sidenav
And added the first toolbar demo to it from https://material.angularjs.org/latest/demo/toolbar
What I want is the toolbar to be fixed.
Codepen demo: http://codepen.io/gvorster/pen/BzWvGe
When adding this style the toolbar is fixed.
<md-toolbar class="md-hue-2" style="position:fixed !important">
But the icons on the right are gone.
Resizing the screen until the sidenav is hidden will show the right side icons.
Removing the style shows the right side icons but the toolbar is not fixed:
Is there a way to get a sticky toolbar and have the rigth side icons shown.
You have to use md-sidenav inside the md-content container. Plus try to use md-content instead of div tag. In your example you gave wrong values to layout-align attribute. Please check the appropriate values in the Docs.
Here is the basic structure for your requirement.
<md-content flex>
<md-toolbar>
</md-toolbar>
<md-content layout="column" layout-fill>
<!-- content -->
<md-sidenav>
</md-sidenav>
</md-content>
</md-content>
here is the working pen. http://codepen.io/next1/pen/xOqMjy
You need to add layouts for all containers and move the toolbar out of the md-content that should be scrolled.
<div layout="row" flex>
<md-sidenav></md-sidenav>
<div layout="column" flex>
<md-toolbar></md-toolbar>
<md-content></md-content>
</div>
<md-sidenav></md-sidenav>
</div>
Here's a working demo: http://codepen.io/anon/pen/EyWJKK?editors=1010
I'm starting to learn AngularJS and Angular Material.
I have a problem on understanding the md-tabs.
<section layout="row">
<div layout="column"><img id="ApplicationLogo" src="https://material.angularjs.org/latest/img/icons/angular-logo.svg"></div>
<div layout="column" id="ApplicationTitle" layout-align="center start">Application Title</div>
<div layout="column" id="ApplicationWelcome" flex layout-align="center end">Angemeldet als Test User</div>
<div layout="column" layout-align="center center"><img id="ApplicationAvatar" src="http://findicons.com/files/icons/1072/face_avatars/300/d05.png"></div>
</section>
Here is a demo: http://plnkr.co/edit/72ZNb70BjSM6xP7RnSvH?p=preview
Any hint why my tabs do not change their content?
you linked to wrong angular material css version.
you used angular-material.js 1.0.7 and angular-material.css 1.1.0-rc2.
changed to the correct version of css should work. (/1.0.7/angular-material.css)
The reason that it didn't work was that the required css class md-visually-hidden in 1.0.7 is renamed to _md-visually-hidden in the 1.1.0.
Don't want to go into too much detail unless you ask for. But try to correct the version and see what happen.
I've been playing around with the bootstrap Collapse (angular UI implementation) to show and hide a well in a MEAN.io application. The show and hide code below works but it doesn't animate the transition between the two states. I'd like to get a smooth animated transition but so far everything I've tried hasn't worked. Thanks in advance for any help you can provide.
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
You are probably missing the dependency to ngAnimate in your Angular application:
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
Remember to load the corresponding JavaScript as well:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
Most parts of my application share a common layout including a header, sidenav and content area. These common elements are set up in my index.html file, and the result of a rendered route is included via the ng-view directive. See below. (Note that I am trying to use Material Design also).
<body layout="row">
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
<header>
<!-- heading -->
</header>
<ul>
<!-- menu options -->
</ul>
</md-sidenav>
<div flex layout="column">
<md-toolbar layout="row">
<!-- tool bar content -->
</md-toolbar>
<md-content flex layout-padding id="content">
<div ng-view></div> <!-- result goes here -->
</md-content>
</div>
<!-- scripts -->
</body>
My question is, how do I go about creating a front page which has a completely different layout, for example it does not have a side navigation? It seems to me that I need to move the header, sidenav etc into a separate template, and then conditionally inject the result of a route into the separate template, before it is used in ng-view. In other words, I think I need to conditionally decorate the route response.
Where do I start with this?
I see that there is a UI-router module available but I think this is probably overkill for my simple scenario.
A simple ng-if might help ... set a variable only in your home page controller so the condition will be false for all other routes.
<md-sidenav ng-if="!homePageControllerVariable">
Another alternative is a dynamic ng-include
I'm developing an app with Ionic and Angular Material.
Now I'm struggling to get Ionics back button to work when it is used under the mdToolbar directive of angular material.
You can see the problem here:
http://plnkr.co/edit/lfVVa4KAUkOFLOL1nQET
In index.html <ion-nav-bar> is located under the <mdToolbar> (line 59) tag and the back button and the title does not show up when navigating.
If the <ion-nav-bar> tag is listed anywhere else it works fine.
Any suggestions where the problem is and how to solve it?
While investigating this issue further it seems in ionic.bundle.js:48400 (function getAssoctiatedNavBarCtrl()) navBarDelegate is not initialized properly. But currently I have no idea why...
If you are interested in material-design, then I recommend you to use Angular-material + Cordova.
Here is yr plunk edited
You will have to reorganize yr base layout :
<body layout="column" ng-controller="AppCtrl" md-swipe-right="openSidenav('left')" md-swipe-left="closeSidenav('left')">
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
</md-sidenav>
<ion-nav-bar layout="column" class='bar-positive'>
</ion-nav-bar>
<div class="row" style="min-height:400px">
<div layout="column" class="relative" layout-fill="" role="main">
<md-toolbar>
</md-toolbar>
<md-content flex="" md-scroll-y="">
<ion-nav-view layout="column" layout-fill="" layout-padding="" class="ui-view-container"></ion-nav-view>
</md-content>
</div>
</div>
</body>