I am having a simple angular material app having mdMenu at bottom of the page. On selecting an option, page scrolls to top.
This happens on firefox only (Tested on ver. 52.0.2).
Using angular ver. 1.6.4
Using angular-material ver 1.1.3
Plnkr
<body>
<div style="height:1000px">This is top</div>
<md-menu md-position-mode="target-right target">
<md-button aria-label="Open demo menu" class="md-raised md-primary" ng-click="$mdOpenMenu($event)">
Menu
</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button>
<div>
<p flex>
Option </p>
</div>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</body>
This is a bug, at the time of posting this is still unresolved and has been backlogged by the devs on github.
Here is a link to the thread https://github.com/angular/material/issues/5690
There is a workaround proposed in the thread which is to use the following style :
body {
height: auto;
}
While it does work for me, it causes vertical div jumping during the DOM load on my project which I do not appreciate.
Here are the two codepens that the user Magador posted to reproduce the bug
(doesn't happen on Chrome, only firefox IE & edge)
Bug demo: http://codepen.io/Magador/pen/ZbmeRo
Demo resolved: http://codepen.io/Magador/pen/wKRBLg
angular.module('yourModule',[]).config( ['$anchorScrollProvider',
function($anchorScrollProvider) {
$anchorScrollProvider.disableAutoScrolling();
}]
);
I resolved the problem by disabling the auto scroll. Be sure to clear the browser cache to ensure its working.
Related
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 =)
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
This question might seem silly question. But I'm really stuck with it.
I am trying to create a carousel with above center title and below centered Description text. There are lot of example on google but I couldn't find anything appropriate.
I am using angular-material and there is no carousel implemented in angular-material till now.
there is awesome carousel in materializecss but when I am adding materialize in project lot of element CSS conflicting because of angular-material and materializecss.
then I decided to use some other directives like JK carousel it is not allowing me create text on image.
there is carousel in ui.bootstrap it also getting conflict with drop downs component.
Could anyone please tell me how can I achieve my requirement?
I have to use angular-material, there's no other choice. So any help using angular-material will be a great support.
I am currently using angular 3d carousel in my angular-material project. It has html slide version. You can build all your angular material classes in that slide html.
<carousel3d-slide ng-repeat="slide in app.slides2 track by $index" ng-style="{'background': slide.bg}">
<div style="padding: 20px; color: #fff">
<md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Large</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</carousel3d-slide>
I have some problem when I'm implement's md-button on angular material. On chrome href is working but on firefox not working. This is my code:
<md-button aria-label="signin" class="md-icon-button mdbtn120px">
<b>SIGN IN</b>
</md-button>
You can try this :
<div class="md-button" aria-label="signin" class="md-icon-button mdbtn120px">
<b>SIGN IN</b>
</div>
It worked for me on a similar case.
I don't really know why this works though, might be nice to find someone who can explain the difference.
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 ;)