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
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.
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 would like to create a toolbar for angular md-cards.
something similar to this image
<md-card layout="column" >
<md-toolbar>
<div class="md-toolbar-tools">
<h3>Card Header</h3>
<span flex></span>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-calendar" class="fa" aria-label="open menu"></md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-user" class="fa" aria-label="open menu"></md-icon>
</md-button>
</div>
</md-toolbar>
</md-card-content>Card Content</md-card-content>
</md-card>
is there any current directives for ngMaterial -angular material- that can
be used to get such nice toolbar for cards or do i have to make custom css for it ?
Angular Material toolbar is using your theme primary color as the toolbar's background-color by default.
toolbar-theme.scss implementation:
https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss
One way to use the background-colors you like is to override the css with !important
md-toolbar {
background-color: white !important;
}
Another way is to set your accent color as white, you can follow this on how to configure theme colors in your app:
https://material.angularjs.org/0.11.4/Theming/03_configuring_a_theme
Then, you can use md-accent in your toolbar directive, for example:
<md-toolbar class="md-accent">
<h2>title</h2>
</md-toolbar>
But this method is under the assumption your accent theme color is white. If you are following Google material design, then you should set multiple themes as charlietfl said.
If you want the font, text size, and color like the picture you showed, you can inspect elements on your browser to get the styles it is using and put it to your CSS.
I do have a toolbar
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="mainCtrl.toggleSidenav('left')" ng-hide="$mdMedia('min-width: 16cm')"
class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg">
</md-icon>
</md-button>
<h1>Test</h1>
</div>
The problem is with "'min-width: 16cm'"
I do have similar problems within a sidenav (with "ng-show="$mdMedia('max-width: 300px')") as well.
In the toolbar the button should vanish if the width is larger than 16cm. The button in the sidenav should only be visible if the with is smaller than 300.
The problem is the following: Either it is visible or not.
What am I doing wrong?
Thank you :)
Found it!
mdMedia was not referenced in the scope (Issue on Github).
So
$scope.$mdMedia = $mdMedia;
was all it needed ;)