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>
Related
I am new to angularJS, I am trying md-tabs to create an items page, where each item is a tab on the page listing its details, here is my HTML code:
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom="" md-autoselect="">
<md-tab ng-repeat="itemTab in itemList" label="{{itemTab.name}}">
<div style="padding: 35px; text-align: left;">
<div ng-repeat="detail in itemTab.details">
<p><pre>{{detail.info}}</pre></p>
</div>
</div>
</md-tab>
</md-tabs>
</md-content>
Here when the number of items increases, more than it can show on the page there is no pagination arrow that would help me to scroll to next set of items, can anyone help me with this problem?
The issue is probably related to you css. Try including the angular material css only and try if it works.
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 =)
This is my code
<md-sidenav-layout>
<left-nav></left-nav>
<md-content >
This is content
</md-content>
</md-sidenav-layout>
And left-nav component contains template html with this code.
<md-sidenav #left [opened]="true" mode="side" layout-padding>
<h2>Left Sidenav.</h2>
</md-sidenav>
The problem is sidebar is not working when I check the generated html code, it is something like this.
Left Sidenav.
This is content
how can I generate code like below without extra tags even if I use component?
<md-sidenav-layout _nghost-pam-3="">
<md-sidenav layout-padding="" mode="side" ng-reflect-mode="side" ng-reflect-_opened="true" class="md-sidenav-opened md-sidenav-side">
<h2>Left Sidenav.</h2>
</md-sidenav>
<md-content layout-padding="">
This is content
</md-content>
</md-sidenav-layout>
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 am using side navigation in my angular application, i am using buttons inside the side navigation with a tool tip on it. But it displays in bottom of the icon, i need it on the right side. I dont see any css attached to it.
Here is the code and plnkr:
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')">
<md-list class="muppet-list">
<md-item ng-repeat="it in muppets">
<md-item-content>
<md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
<img ng-src="{{it.iconurl}}" class="face" alt="">
{{it.name}}
</md-button>
<md-tooltip>
Create Chart
</md-tooltip>
</md-item-content>
</md-item>
</md-list>
</md-sidenav>
SIDE NAVIGATION
I have done it using the md-direction attribute
<md-tooltip md-direction="right">Save</md-tooltip>