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.
Related
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.
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>
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
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 ;)
The way accordion is built is one accordion below another
I want to be able to make them side by side.
I have a button that will open/close everyone at once.
I tried adding a span above the accordion-group but it didn't help.
<div id="top-panel" style="height:auto;border-bottom-style: outset;">
<accordion close-others="false">
<span ng-repeat="widget in _widgets">
<accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
moo
<button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
</accordion-group>
</span>
</accordion>
</div>
<div id="bottom-panel">
<div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
<button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
</div>
<div id="preview-panel" style='float:right; width:570px;'>
<ng-include src="htmlInclude" />
</div>
</div>
How can I achieve this?
[edit]:
I realize I might not have explained this correctly.
I want the accordions to be VERTICAL, but just for them to be located side-by-side
[solution]:
Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers
Well the solution was pretty simple, just added
style="display:inline-block" to the accordion-group.
cheers
I have come across a plugin called zAccordian.
http://www.armagost.com/zaccordion/
It is a horizontal accrodian, i think this should suffice for your needs.
If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.
Regards,
Warren