These are chat archives for angular/material

5th
Jan 2016
tonyeung
@tonyeung
Jan 05 2016 00:10
why is my icon positioned so bizarrely? i assumed the icon would sit in the middle of the button, but its offset to the bottom right for some reason. http://codepen.io/anon/pen/gPgNQq
Patrick Finkbeiner
@pfinkbeiner
Jan 05 2016 09:22
@tonyeung it’s simply too big. Change md-36 to md-28
Night Monkey
@NightAOtidae
Jan 05 2016 11:36
dumb question does anyone have an example with md-toolbar, md-sidebar, and md-content that is similar to the angular material website?

basically

[ Top bar |||--------------------- Settings ]
[ Left Nav ] [ Content ]

Night Monkey
@NightAOtidae
Jan 05 2016 11:46
just a note but the material-start and a variety of other material starter packs, are very basic when it comes to demo'ing components.
 <md-content flex role="navigation">
      <ul class="docs-menu">
        <li ng-repeat="section in menu.sections" class="parent-list-item {{section.className || ''}}" ng-class="{'parentActive' : isSectionSelected(section)}">
          <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
            {{section.name}}
          </h2>
          <menu-link section="section" ng-if="section.type === 'link'"></menu-link>

          <menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>

          <ul ng-if="section.children" class="menu-nested-list">
            <li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
              <menu-link section="child" ng-if="child.type === 'link'"></menu-link>

              <menu-toggle section="child" ng-if="child.type === 'toggle'"></menu-toggle>
            </li>
          </ul>
        </li>
      </ul>
    </md-content>
Florian Knop
@fknop
Jan 05 2016 11:48
@NightAOtidae I think this one solves your problem, there is a demo: https://github.com/flatlogic/angular-material-dashboard
Night Monkey
@NightAOtidae
Jan 05 2016 11:50
The example pulled from the docs template is really pretty useful but could have helped with some documentation.
@fknop i think i looked at this before but let me look again
Night Monkey
@NightAOtidae
Jan 05 2016 12:00
Florian Knop
@fknop
Jan 05 2016 12:01
Yes
Night Monkey
@NightAOtidae
Jan 05 2016 12:06
@fknop thanks but unfortunately that kind of just shows <md-sidenav
I suppose a better question would be, on the angular material site, there is a sidenav that is utilizing <li tags and a combination between menu link and menu-toggle
What I can't seem to find is examples that are doing hierarchical navs on the left menu
other examples of this are more complex components where-in one material component is made up of 4-5 other components, all of which are sending data to one another etc
Night Monkey
@NightAOtidae
Jan 05 2016 12:11
@fknop the example you gave for instance is primarily using angular 1.4 type directives vs trying to create components like in angular 2.0
@fknop obviously directives / components are similar, but what im saying is that im looking for a few examples for complex components in more of a 2.0 style feel
Florian Knop
@fknop
Jan 05 2016 12:15
For the angular material website, the source is on github :)
If that's what you want. But the component style is new, so not a lot of examples
Night Monkey
@NightAOtidae
Jan 05 2016 12:17
right
kind of what im running into
@fknop I do really appreciate all of the help though
jmls
@jmls
Jan 05 2016 15:18
so, how do I duplicate the item list and scroll bar of google inbox in material ? I have this ugly permanent scrollbar, whereas the inbox has a flat scrollbar that is hidden when not over the items on the left. The whole look is just so smart but I can;t seem to replicate it no matter what I do ;)
tonyeung
@tonyeung
Jan 05 2016 15:46
@pfinkbeiner should the button not adjust to the size of the icon?
how else would I make a button using the material directive if I want a bigger button?
I traced it down to the md-button class that gets put on the button element
if i remove the width and height from the class then everything looks good, but that seems kind of hacky
if there's a way to do this in material without overriding the class i'd like to do that instead
Patrick Finkbeiner
@pfinkbeiner
Jan 05 2016 16:42
Hm, maybe I am the only one but if I want to have something customized I must use a custom CSS where I override some stuff
Night Monkey
@NightAOtidae
Jan 05 2016 16:51
Has anyone tried using boostrap3 + angular material?

I noticed that if you do something like <md-toolbar>

<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarController">
<div class="container">

that bootstrap will not stretch across the top
The problem is that material design while very useful, has a few caveats in that it does not handle some components that bootstrap already has built in from what I can tell.
tonyeung
@tonyeung
Jan 05 2016 17:13
@NightAOtidae i wouldn't mix it. I was using bootstrap + material for awhile and it was just a PITA
things worked really well once i stripped out all the bootstrap
@pfinkbeiner i guess i'm just used to bootstrap "just working". I have an override to handle the larger icon right now, but it feels really clunky. I might get around to doing a PR later for md-button to handle md-icon.md-xx correctly
Patrick Finkbeiner
@pfinkbeiner
Jan 05 2016 17:14
Okay, a PR would be great, I guess…
tonyeung
@tonyeung
Jan 05 2016 17:15
you don't think its a good idea?
Patrick Finkbeiner
@pfinkbeiner
Jan 05 2016 17:16
A pull request? Sure, I guess pull requests are always welcome…
tonyeung
@tonyeung
Jan 05 2016 17:17
the i guess and ellipses makes me nervous
Patrick Finkbeiner
@pfinkbeiner
Jan 05 2016 17:17
No, sorry :)
tonyeung
@tonyeung
Jan 05 2016 18:25
what is the proper way to make md-item in a md-list to fill? I'm trying to make a menu for the side-nav
right now i have a bunch of layout-fills, and it feels clunky
Craig Shearer
@craigsh
Jan 05 2016 19:02
I'm seeing horrendously bad performance when using md-tabs with the Chrome dev tools open. It seems fine when the dev tools aren't open. E.g. using this code pen: http://codepen.io/anon/pen/OyjBLz running with the dev tools closed brings up the app in about 1 second - changing the HTML sees it re-render in the same time. But with the dev tools open it takes about 13 seconds. I'm seeing similar issues in my app with dev tools open.
cartia
@lrondanini
Jan 05 2016 19:08
did anything changed with md-toast? I just updated to v1 and now I cannot use a simple class to set the background anymore (I have to use md-toast.bg-green > div) am I missing something?
Florian Knop
@fknop
Jan 05 2016 21:48
@craigsh I don't have any problems with the dev tools open, sorry :/
Craig Shearer
@craigsh
Jan 05 2016 21:48
@fknop ah, that is interesting. I will try another machine.
Craig Shearer
@craigsh
Jan 05 2016 22:04
@fknop - strange, it only happens on my dev machine (running Windows 10) with the latest Chrome installed. Another Windows 10 machine works fine. I guess I'll ignore this for now and work around it.