FAQ Database Discussion Community


Click event on Angular Material Design Gridlist

angularjs,angular-material
I'm going through Angular Material Design Gridlist and they have not mentioned anything about handling hover/click on the grids. So, is there a way to do it or should I use buttons inside each grid to handle click events ?

Angular-material theming issue

angularjs,material-design,material,angular-material
This is my first time using Stack Overflow so please be nice :) Basically I am using Angular-material on a project and I cannot for the life of me figure out where to change the color schemes/theming. I am using the docs-dark theme but cannot find where to alter it...

Angular-material: Remove dots in discrete md-slider

angularjs,slider,angular-material
While using md-slider from angular-material, if the range of max and min is less, then the slider is looking fine: However if the range of value is wide (1-100) then the pink line of the slider is getting overlapped by grey dots: Is there a way to remove these grey...

Flexbox and Angular material tabs

css,flexbox,angular-material
I'm trying to use a flexbox inside a tab-body but there's some issue when setting the max body tab's height to 100% Here's what I'm trying to achieve: http://plnkr.co/edit/r8yCblnMev7ZD4VBcJlQ?p=preview <div layout="column" layout-fill style="height: 100%;"> <div flex="33" style="background-color: blue;"> block1 </div> <div flex="33" style="background-color: yellow;"> block2 </div> <div flex="33" style="background-color: green;">...

AngularJS material mobile layout not responsive

angularjs,responsive-design,flexbox,angular-material
I am trying to make a responsive website and the issue that I am having is the mobile version just looks like a super tiny version of the desktop. <body ng-controller="body" > <div layout="column"> <div flex> I'm above on mobile, and to the left on larger devices. </div> <div flex>...

how can I change the color of Toast depends on message type in Angular material $mdToast?

angularjs,material-design,toast,angular-material
While using $mdToast.simple().content("some test") it is showing the toast with black color. how can I change that color to red, yellow and so, depends on the type of the error messages like error, warning and success.

Angular Material: Increase form size

css,angularjs,material-design,angular-material
I am searching for a possibility to control the size of input elements in angular material. I want to create a form as shown here http://i.stack.imgur.com/nnkup.png but the main problems (tested with the md-display-2 class) are caused by the animation of the labels as their position in the input field...

md-select initialization with i18n

angularjs,i18next,angular-material
I'm using Angular-material and I18next. Here is my simple example : <md-select ng-init="val='en'" ng-model="val"> <md-option ng-value="en">{{'en' | i18next}}</md-option> <md-option ng-value="de">{{'de' | i18next}}</md-option> </md-select> The select title is initialized with 'en' and not 'English'. But as soon as I select an other value the correct internationnalized value appears as the new...

AngularMaterial: Custom md-tab-label in md-tabs

angularjs,tabs,angular-material
According to md-tab Documentation we can have custom md-tab-label, which I'm trying to do like this: <md-tab-label class="my-label"> Label </md-tab-label> My css: .my-label{ background: #40FF00; } However, the background color is not appearing for tab labels. Am I doing something wrong ?...

$mdDialog stacked/nested dialogs, is it possible?

angularjs,angular-material
I want to open one $mdDialog on top of the other. If possible, have unlimited overlapping dialogs. Any ideas? ...

Conditional class on $first item in array using ng-repeat

javascript,jquery,arrays,angularjs,angular-material
I am building an app that pulls and displays a list of time slots from a database using ng-repeat. I also have a navigation that pulls and displays the month/day from the same database using ng-repeat. When you click on one of the days in the nav, ng-click will filter...

Closable tabs in Angular material

angularjs,material-design,angular-material
I've been fiddling with Angular-Material and it does seem pretty slick. One of the issues though, that we're having is the lack of the ability to close a tab using an 'X' button next to the tab's label. This is similar to what any browser tab UI will have to...

md-select - how to force required?

html,angularjs,material-design,angular-material
How do I force md-select in multiple mode to behave just like <select multiple required ... > ? Here is the fiddle, to show what I mean. In this example, my browser doesn't let me submit form without selecting at least 1 option from the select tag. I want md-select...

Why does the angular-material `Getting Started` example not actually work?

angular-material
Is it just me, or is the angular-material "Getting Started" example broken? On that page (link above), there's an inline codepen to show using angular-material. But the demo doesn't work! (In particular, I don't see a button to collapse the sidebar.) Since I used this example in my started project,...

ng-repeat not working in md-chip

angularjs,angular-material
Why is md-chip not supporting ng-repeat? <md-chips> <md-chip data-ng-repeat="category in book.categories"> {{category.name}} </md-chip> </md-chips> ...

Always display the Rating bubble in md-slider

css,angularjs,css3,angular-material
I'm going through md-slider in md-discrete mode. However, I want to display the slider bubble all the time like this: I dont want this bubble to disappear when I click anywhere else. Is there a way to do this ?...

Angular-material md-select cuts off background to edge of content?

javascript,css,angularjs,angular-material
I updated to angular-material 0.9 and now when I open md-select it cuts off the background to the edge of the content. Is there some way to avoid this? http://codepen.io/anon/pen/yNOypa <div class="background"> <div layout="column" layout-align="center center" flex> <md-select placeholder="Pick"> <md-option value="1">One</md-option> <md-option value="2">Two</md-option> </md-select> </div> <p>The background ends at the...

How to disable built-in keypress actions in Angular Material?

javascript,angularjs,angular-material
I have a trouble with Angular Material's sidenav's native hotkey 'esc' action. When the esc is pressed, the framework will toggle $mdSidenav('left/right').toggle(). This is undesirable because I want my toggle action to also toggle other actions. I have tried using "pure" javascript to block the action with codes: document.onkeydown =...

Should I use the native angular-material or a Bootstrap-like material design framework instead?

twitter-bootstrap,angular-material
Besides the fact that Angular Material uses flexbox, is there a programmatic (speed, etc.) benefit to using a material design framework that is native to Angular versus using a Bootstrap-like framework such as Materialize?

No instance found for handle for md-sidenav inside ng-repeat

angularjs,angular-material
I'm trying to create a stack of multiple, dynamically created md-sidenavs. I can push their IDs onto a stack, but can not toggle them while using ng-repeat. Using: app.controller('MenuCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav) { var stack = []; $scope.getStack = function() { return stack; } $scope.add = function(id) { stack.push(id);...

angular-material - open link in md-checkbox

angularjs,angular-material
I have this code: <div layout="row"> <md-checkbox aria-label="Checkbox"> Read <a href="terms-of-service.pdf" target="_blank">terms&conditions</a> </md-checkbox> </div> How can I open link in "md-checkbox" ? Here is Plunkr...

Create a menu like in AngularJs Material website

angularjs,angular-material
I want to create a menu that looks like the one in AngularJs Material website (https://material.angularjs.org) Unfortunately there is not documentation or demo to do that. Any ideas? Thanks...

AngularJS Material Design : Different colors for different tabs in md-tabs

angularjs,tabs,angular-material
Is there a way to set different background colors for different tabs in md-tabs ? The default is no color as can be seen in tabs demo I tried <md-tabs background-color="green"> but it's not working...

md-select on hover open select options

css,angularjs,angular-material
Is it possible to expand md-select on mouse hover? For example, I want this State select to expand on mouse hover http://codepen.io/anon/pen/vOmQgj <md-select placeholder="State" ng-model="ctrl.userState"> <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option> </md-select> ...

md-sidenav overflow not working

css,angularjs,angular-material
This is a Firefox issue, Chrome works fine. Sidenav its not "overflowing" the content To see in action, just visit the link below using Firefox, to get it right, use Chrome. Angular Material Demo v0.9.8 There is no much to say. Any tips? <div layout="row" flex> <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2"...

AngularJS' “multidir” error when using ng-include and msSidenav in Angular Material

angular-material
My project is based on Angular Material framework (basically: Angular + web components in Material Design). The problem I got into is that for some reason one directive ( md-sidenav) causes multidir error. <md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="false" ng-controller="sideMenuController"> </md-sidenav> I'm sure md-sidenav is the bad guy since I tried...

How to append an html tag containing md-checkbox and md-icon?

javascript,jquery,html,angularjs,angular-material
I am working with angular material and angular js and i am trying to append a new html div when a function is called from the view. This is my view: <div id = "main_row" ng-click="defCtrl.submit()"> </div> This is what i am trying to do inside the controller: self.submit =...

multidir error with mdButton

javascript,angularjs,angular-material
I'm trying to use <md-button> in angular-material, but it's not quite working. It's giving me a [$compile:multidir] error like the following: Error link. Here's a Gist of my HTML (my JavaScript has too much logic/secrets and such to release right now): https://gist.github.com/zebMcCorkle/c7ba6175b0c3f510c001

Show chips from db in form

angularjs,angular-material
I am saving chips in db using you form . But I want to update those chips too so I fetched data from db (chips) and wanted to show them as tags in update form so that user can delete them if he wanted to delete and can add more...

Documentation on Angular Material $mdDialog.finally?

javascript,angularjs,angular-material
From the documentation, dialog boxes in Angular Material have a signature like so: function showAlert() { alert = $mdDialog.alert() .title('Attention, ' + $scope.userName) .content('This is an example of how easy dialogs can be!') .ok('Close'); $mdDialog .show( alert ) .finally(function() { alert = undefined; }); } I can't seem to find...

How can I left align the text in an Angular Material stretched md-button?

button,alignment,angular-material
Without tinkering too much with my own CSS, Is there an attribute or configuration I can use to left align the text in a md-button that is stretched a bit to fit a menu for example? This is my current view <md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column"> <md-toolbar> <h1 class="md-toolbar-tools"> <a ng-href="/" layout="row"...

Not able to use Angular-Material Directives [closed]

angularjs,angular-material
I just included CDN URLs for Angular and Angular Material and trying to use Angular Material. But Seems like it is not working.

angular material and toastr css not working together

css,angularjs,toastr,angular-material
I'm using Angular Material and Toastr I've used bower to install both, they are working together except that the styling of the toastr is being overrided. so when I try to use toastr.warning(...) I get the following toast http://imgur.com/sNKx4F3 instead of getting something similar to the following http://imgur.com/71r9LPz the generated...

When exactly is ng-checked called

javascript,angularjs,checkbox,angular-material
While using AngularMaterial, I have ng-checked like this: <md-list> <md-list-item ng-repeat="option in options"> <p> {{ option }} </p> <md-checkbox class="md-secondary" aria-label="{{$index}}" ng-checked="exists($index)" ng-click="toggle($index)"></md-checkbox> </md-list-item> </md-list> And my exists function: $scope.exists = function (optionNum) { console.log('Inside $scope.exists. option: '+optionNum); }; My timer: function updateTimer() { var onTimeout = function(){ mytimeout =...

How to define style to layout-margin flex variants, using Angular Material

css,angularjs,angular-material
I want to have different margins for flex and flex-sm tags: <div layout="row" layout-margin layout-wrap> <div flex="30" flex-sm="100" ng-repeat="occasion in resultObject.occasionTypes[typeIndex].occasions"> ------------ </div> </div> I tried to use something like: [layout-margin] > [flex] { margin: 3px; } [layout-margin] > [flex-sm] { margin: 0px; } But it doesn't work. Is there...

Angular material - issues with tooltip and flex

angularjs,angular-material
The issue is that my tooltip is shown on the bottom left part of my button when I hover on the botton for the first time. Then it seems it fixes its position and works as expected. This happens in all desktop browsers. I am using v0.9.8. I have used...

Angular Material 0.9.7 Form Validation Example

angularjs,angular-material
I want to validate form using angularjs and angular-material built-in directives including messages under field like, input, select, radio buttons. There are some specific requirements: The Form fields should have equal heights The radio buttons i.e. md-radio should be inline The location of messages under fields should be similar The...

Angular Material: $scope can't get ng-model in md-tab

angularjs,angular-material
HTML: <div ng-controller="AppCtrl" class="sample tabsdemoDynamicTabs" layout="column" ng-app="MyApp"> <md-content class="md-padding"> <md-tabs md-selected="selectedIndex"> <md-tab label="Login"> <form name="loginForm"> <md-input-container> <label>Username</label> <input type="text" name="login_username" ng-model="login_username" required> </md-input-container> <md-input-container> <label>Password</label> <input type="password"...

Angular material select element not aligned with other form controls

angular-material
While designing a form using Angular Material I noticed that the <md-select> directive is not aligned with the other input controls. See below: I literally copied the code from the example on the Angular Material page, and added the <md-select>. Here is my code: <div layout="column" layout-padding> <md-content> <form> <div...

Angular-Material: What is md-tile-left and md-tile-content

angularjs,angular-material
I am reading the example for md-list (and md-item) on the Angular-Material-site. In the source I see this html: <div ng-controller="AppCtrl"> <md-content> <md-list> <md-item ng-repeat="item in todos"> <md-item-content> <div class="md-tile-left"> <img ng-src="{{item.face}}" class="face" alt="{{item.who}}"> </div> <div class="md-tile-content"> <h3>{{item.what}}</h3> <h4>{{item.who}}</h4> <p> {{item.notes}} </p> </div> </md-item-content>...

How to angularjs app.service and $q in typescript

angularjs,typescript,angular-material
I am Very new to typescript and angular Js . I have am not able to find correct answer , my code is given below: export class SidenavController { static $inject = ['$scope', '$mdSidenav']; constructor(private $scope: any,private $mdSidenav: any) { } toggleSidenav(name: string) { this.$mdSidenav(name).toggle(); } loadHelpInfo() { this.helpService.loadAll() .then(function(help)...

How to hide a grid tile in a grid list in angular material design?

angularjs,material-design,angular-material
I am new to material design. I was implementing a grid list using angular material design. But suddenly I needed to hide one tile. Can anyone tell that how to hide a tile in grid list. If I explicitly set "display" property to none then the space remains blank but...

Angular-material: md-select moves container element

css,angularjs,flexbox,angular-material
Here is the jsfiddle It seems like the md-options are colliding with the body margin when the layout-margin directive is applied. The HTML: <body style="background-color: orange;" layout="row" ng-controller="AppCtrl" ng-app="StarterApp" layout-margin layout-fill> <div flex="35" class="md-whiteframe-z1 white"> <md-select placeholder="Pick" ng-model="someVal"> <md-option value="1">One</md-option> <md-option value="2">Two</md-option> </md-select> </div> </body> How can i avoid this...

Angular-Material is there some way md-sidenav and main content can both have focus

angularjs,angular-material
I am using Angular Material to implement a sliding nav bar using the md-sidenav directive. index.html <div flex> <md-content> <p>Here is content.</p> <a href="">Click Me</a><!-- I want to be able click this even when the sidenav is open!!! --> </md-content> </div> <div ng-controller="SideNavCtrl as sd"> <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right" md-is-open="sd.rightSideBarOpen"...

md-autocomplete not displayed

javascript,angularjs,material-design,angular-material
I am giving angular material design a try and i cannot get md-autocomplete displayed. I have included in my existing project: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script> <!-- Angular Material Dependencies --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script> <script...

Angular Material: how to set background-color (without CSS)

angular-material
I'm developing a pure Material Design application using Angular Material framework. However, I don't understand how to set containers' background colors (e.g. a login form with a blue background). I could do it using CSS of course but I wonder if there's a built-in directive / theme option to do...

Why is my Material AngularJS (CSS) not working as in the demo provided?

html,css,angularjs,material-design,angular-material
I am a total newbie to the World of AngularJS. However, I wish to implement the material design version of AngularJS for creating a form. So I followed the getting started instructions and tried to do something, but it did not look like the one on the site. So, I...

Angular material not working

angular-material
I wanted to use angular material in an AngularJS application so I downloaded it with all its dependencies: <script src="bower_components/hammer/hammer.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-aria/angular-aria.min.js"></script> <script src="bower_components/angular-animate/angular-animate.min.js"></script> <script src="bower_components/angular-material/angular-material.min.js"></script>...

AngularJS Material using $mdDialog in a directive linking function

javascript,angularjs,angularjs-directive,angularjs-scope,angular-material
I am trying to put an Angular Material dialog in a directive's linking function. Conceptually, I'm not seeing why this would not be possible. As per the docs, the $mdDialog.show is on a scope and $mdDialog.hide(); rests in a controller defined by the $mdDialog.show object. I've been able to get...

Angular-material md-select with images or svg

angularjs,svg,angular-material
I am using angular material, I want to use md-select but with images/svg; I am using md-option together with ng-repeat and the list of options works, but when I select something I see the text. Is it feasible? Thanks <md-select ng-model="mkt.bookmaker" placeholder="Select a bookmaker"> <md-option ng-value="opt" ng-repeat="opt in mkt.selected.matchInfo.bookmakers"> <md-icon...

Unable to keep the static data for the input type fields in angular material

user-input,angular-material
How to make a default static value for input in material design? <input type="text" value="xyz" /> but in material design angular I am unable to keep the static value like value="xyz <md-input-container> <label>Start date</label> <input ng-model="agg.startDate" value="xyz"> </md-input-container>" value xyz is not affected in this case....

Angular Material: how to realize a list like on docs website?

javascript,angularjs,angular-material
On Agular Material website (https://material.angularjs.org/#/) there is a lateral bar with a list. This list has 'accordion-like' feature, clicking on some items expands tyhe list with some subitems, for example clicking on DEMOS will appear a list of available demos. I'd like to realize this into my webapp, but I'm...

Angular material md-toolbar expansion transition

javascript,angularjs,css3,material-design,angular-material
I'm using the md-toolbar component from Angular material. By default, its height is "normal", and by adding the class md-tall, it can be taller. I'm trying to apply a CSS transition to make it expand smoothly, but it doesn't behave as expected. The transition only occurs one way, but not...

Add text-transform: none and font-weight :bold styles to in angular materials design without inline css

angular-material
I am working on a project that is using angular materials design and I wanted to add certain styles to without using inline css but could not figure out the best way to do same. Please note I tried adding a class with those styles but it was by default...

resize bar for sidenav in angular material design.

javascript,css,angularjs,angularjs-directive,angular-material
Is there a directive in angular material to resize sidenav? There is a sidenav which shows list of clients and the right pane has the details of the client. I am trying to add a resize bar between them. I used the following http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview which i found in the following...

Angular material layout - issues with flex

javascript,html,angularjs,flexbox,angular-material
I have a problem setting the flex properties of my layout. Here is a plunker: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview Here is the link to documentation: https://material.angularjs.org/#/layout/grid The issue that the flex property of the input (text) and input (button) are not obeying the flex attribute. What I am trying to achieve is something...

Creating and Selecting Angular Material Tab

javascript,angularjs,material-design,angular-material
I am currently using the md-selected property of the md-tabs directive to control which tab is the selected tab. When I create a new tab, I'd like to select the newly created tab. This works in the demo I've included, but throws errors. Is there a better way? js: $scope.addTab...

Angular Material — $mdDialog.show() returning scope items to parent scope

javascript,angularjs,angularjs-scope,material-design,angular-material
Yo! I have a controller which houses a bunch of items on its $scope. One of the scope items, $scope.openDialog opens a $mdDialog via $mdDialog.show(). The object passed into $mdDialog.show has a template which houses controls for uploading files via the ng-file-upload project, which you can read about here. I...

Ionic directives VS Angular material directives with Ionic Framework

angularjs,ionic-framework,material-design,ionic,angular-material
I want to use ionic with material design. I am stuck between using ionic directives with custom css and angular-material I have read that using ionic directives we get lot of efficient features like App data is remembered with UI-router, even after navigating to other view and coming back to...