These are chat archives for angular/material

25th
Nov 2015
Vassilis Pitsounis
@vapits
Nov 25 2015 10:55
Hi there!
I'm trying to add angular material to an existing project of mine and i'm having issues with the styling. It seems that is not load any style
blob
for example this is a list with divider
i'm using angular 1.3.15
isntall though bower and use browserify
i have inject the dependecy and add also default theme in the config
i'm not getting any errors and i'm stuck at all, not find anything online
Any ideas anyone?
Al Pagan
@wayfarerboy
Nov 25 2015 10:59
@vapits Would be good to see a codepen or online example, if possible.
Vassilis Pitsounis
@vapits
Nov 25 2015 11:00
I know @wayfarerboy but it's impossible to transfer the app to a codepen example it's a huge app :/
Felix Becker
@felixfbecker
Nov 25 2015 11:01
Does anyone here have experience with switching a large application thats currently in production from Bootstrap to ngMaterial?
Al Pagan
@wayfarerboy
Nov 25 2015 11:02
@vapits np. So you've added the 'ngMaterial' require when you initialise your app: angular.module('myApp', ['ngMaterial'....])?
Vassilis Pitsounis
@vapits
Nov 25 2015 11:02
Yes
And my html look like this in the spesific tempalte:
<md-content>
<md-list>
<md-list-item class="md-3-line" ng-repeat="item in datasetData.data">
<div class="md-list-item-text">
<h3>{{item.city}}</h3>
<h4>{{item.country}}</h4>
</div>
<md-button class="md-secondary">Delete</md-button>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
Al Pagan
@wayfarerboy
Nov 25 2015 11:03
@vapits And what does the config call look like when you're setting a default material theme?
Vassilis Pitsounis
@vapits
Nov 25 2015 11:03
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('blue-grey')
.warnPalette('orange');
and of course $mdThemingProvider is injected there
Felix Becker
@felixfbecker
Nov 25 2015 11:04
Because there are a few things that I'm struggling to replace:
  • Basic responsive container (<div class="container"></div>)
  • Navbar (combination of toolbar + tabs maybe?)
  • Accordion (vAccordion on npm)
  • Tables with hover and success, danger, warning row styles
Al Pagan
@wayfarerboy
Nov 25 2015 11:04
@vapits And checking the <head>, are there any inline styles being injected at all?
Vassilis Pitsounis
@vapits
Nov 25 2015 11:04
nope, not inline stylings nowhere in my app
Al Pagan
@wayfarerboy
Nov 25 2015 11:05
@vapits Definitely sounds like ngMaterial's not initialising, although you're saying there are no errors so that would suggest things are hunky-dory. Hmm....
Vassilis Pitsounis
@vapits
Nov 25 2015 11:06
Yeap i beleive that too. I;m using browserify and i have added there also and it seems that is loaded
require('angular-material');
require('angular-aria');
added both in my libs
and inwhen i run browserify i get no errors either there
Felix Becker
@felixfbecker
Nov 25 2015 11:09
@vapits Did you also require('angular') and bootstraped your app with ng-app="..." ?
Vassilis Pitsounis
@vapits
Nov 25 2015 11:09
yes of course :)
Al Pagan
@wayfarerboy
Nov 25 2015 11:09
@vapits I'm not familiar with browserify, so I'm wondering if there lies the problem. Difficult without launching an identical setup and checking sequence step-by-step.
Felix Becker
@felixfbecker
Nov 25 2015 11:09
I made this mistake so many times already, never figured out why I didn't get any errors, and then it hit me and I felt like an idiot xD
I'm using browserify too
Al Pagan
@wayfarerboy
Nov 25 2015 11:10
@felixfbecker hehe. Definitely been there :)
Vassilis Pitsounis
@vapits
Nov 25 2015 11:10
i'm sure @felixfbecker that's something probably something stupid from me but this is an excisting huge angular project running for a long time. The only change is adding angular material there
Al Pagan
@wayfarerboy
Nov 25 2015 11:11
@vapits And angular-material.css is definitely in head too?
Vassilis Pitsounis
@vapits
Nov 25 2015 11:12
well, browserify does this for me so i guess it's one minified css file
sorry grunt i mean
Al Pagan
@wayfarerboy
Nov 25 2015 11:14
@vapits Do a search for .md-ripple-container in the minified css file and check. If you can't find it then you have your answer.
Vassilis Pitsounis
@vapits
Nov 25 2015 11:17
omg u found it
Al Pagan
@wayfarerboy
Nov 25 2015 11:17
@vapits YAY!
Vassilis Pitsounis
@vapits
Nov 25 2015 11:17
i was doing this:
@import "../lib/angular-ui-grid/ui-grid.css";
instead of this:
@import (less) "../lib/angular-ui-grid/ui-grid.css";
stupid as always :P
thank you both guys! save my day :)
Al Pagan
@wayfarerboy
Nov 25 2015 11:18
At least you know you won't be making that mistake again :D
Vassilis Pitsounis
@vapits
Nov 25 2015 11:18
:beers:
Al Pagan
@wayfarerboy
Nov 25 2015 11:18
:+1:
Felix Becker
@felixfbecker
Nov 25 2015 11:24
Gonna ask my question again
Does anyone here have experience with switching a large application thats currently in production from Bootstrap to ngMaterial?
Because there are a few things that I'm struggling to replace:
  • Basic responsive container (<div class="container"></div>)
  • Navbar (combination of toolbar + tabs maybe?)
  • Accordion (vAccordion on npm)
  • Tables with hover and success, danger, warning row styles
Al Pagan
@wayfarerboy
Nov 25 2015 11:31
@felixfbecker Just working on a simple toolbar/sidenav/content codepen for you now...
Felix Becker
@felixfbecker
Nov 25 2015 11:37
@wayfarerboy appreciate it! thanks!
Al Pagan
@wayfarerboy
Nov 25 2015 11:59
@felixfbecker OK, let's start with this template and we can expand on the areas you're not sure of: http://codepen.io/wayfarerboy/pen/VvOJJv
Felix Becker
@felixfbecker
Nov 25 2015 12:12
thank you for your effort. So layout-margin basically makes a container like Bootstrap's?
Al Pagan
@wayfarerboy
Nov 25 2015 12:15
No, layout="column||row" is the container, and the designation of "column" or "row" informs the wrapper how to arrange its children.
layout-margin and layout-padding just adds margin and padding to each child or group of children (the same way you can with table rows and cells)
layout-fill tells the combined child elements to fill the wrapper space and layout-wrap tells child elements to continue onto another column/row if their combined size extends the wrapper
I'm using wrapper and container to mean the same thing there - the element that has layout="column||row". Sorry, I'll use the term container from now on.
Felix Becker
@felixfbecker
Nov 25 2015 12:26
The bootstrap class="container" is just a content wrapper that is 100% width on mobile, something like 80% on tablets and about 60% or so on desktops. So it just makes a nice responsive content wrapper that applies padding to the content depending on the device size
It still don't fully understand what I have to apply to my wrapper div in ngMaterial to get a similar behaviour, could you elaborate?
Al Pagan
@wayfarerboy
Nov 25 2015 12:55
Does this example make it a little clearer? http://codepen.io/wayfarerboy/pen/xwoKbq I've tried to simplify the example so that it emulates the 'container' class in bootstrap.
Notice that flex flex-md="80" flex-gt-md="60" are added to the child elements of the layout="row" container. This means the child elements flex a percentage of the total width of the container. If the container used layout="column", then the child elements would flex a percentage of the total height.
Felix Becker
@felixfbecker
Nov 25 2015 13:00
yes, thank you!
I think for data tables I will just write my own CSS that resembles the Material Design spec.
Al Pagan
@wayfarerboy
Nov 25 2015 13:03
I think that's a good idea. The team has it on the roadmap but it's not implemented yet. You'll find that with accordion too. Best to roll your own.
Felix Becker
@felixfbecker
Nov 25 2015 13:18
@wayfarerboy i use this :) http://lukaszwatroba.github.io/v-accordion/