These are chat archives for angular/material

26th
Mar 2016
ach
angular material is so frustrating when it comes to layout
all I want to do is have a toolbar
and three panels that fill available window height
left 2 are fixed width
layout-fill ?
so no flex
I know, I know that this should be simple - but I have tried every combination of layout=row/column/flex
aaaaarggghhhh :(
yeah true the layout stuff is a bit messy
prefer semantic-ui
so, atm I have
yeah - but I use angular
<section ui-view></section>
as the main html
and
geez i wish semantic had an angular module
Johannes Pichler
@joeherold
Mar 26 2016 09:49 UTC
Easy
please god let it be so ;)
Johannes Pichler
@joeherold
Mar 26 2016 09:50 UTC
One Container with with layout row and flex
Inside 3 containers with flex
See example of sidebar menu on demo page
Manuel Pacheco
@ShadowManu
Mar 26 2016 09:51 UTC
@jmls hold your horses, and don't complain so fast about material layout, which I profoundly love because it helps me so much ;). Can you explain more detailed what you want?
Johannes Pichler
@joeherold
Mar 26 2016 09:51 UTC
To be scrollable: md-content inside md-content
Ore even more easy: body has layout row.... Then 3 containers with flex
@ShadowManu : I know that it's one of those lightbulb things, and when it goes off, it will be a "what the hell was I getting worked up about". the problem is that I have been fumbling in the dark for so long without finding the switch.
it's taken me days
to get nowhere - and I know that it must be simple!
Manuel Pacheco
@ShadowManu
Mar 26 2016 09:58 UTC
its CSS at the end, so... we all work to make it simple but oh man, sometimes the way is quite rowdy ;)
heh
blob
I want the header to be a toolbar, the "menu" "content" and "ad" to be the panels - the footer is optional bu would be nice to have a "sticky" footer
the three panels should fill the available space (but no scrolling)
this seems such a simple, standard format
and it's annoying me that I am being so bloody thick I can't see it ;)
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:01 UTC
ok, lets start working something out so you tell me what more fixes you may need....
give me 2 minutes
man, I appreciate this
Johannes Pichler
@joeherold
Mar 26 2016 10:03 UTC
@jmls you need to get used of the CSS flex box model system. Then you understand the material flex
yup - I've been trying to read all that I can on that
it all makes perfect sense - until I try and put that into practice ;)
Johannes Pichler
@joeherold
Mar 26 2016 10:05 UTC
Check out the link
This is the best explanation I know so far. Helped me a lot
thxs
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:17 UTC
@jmls you can start with this inside the body:
<style>
.header { background-color: green; height: 100px;}

.main { height: 300px;}

.menu { background-color: yellow; }
.content { background-color: blue; }
.ad { background-color: red; }

.footer { background-color: purple; height: 100px;}

</style>

<div layout="column" layout-fill layout-align="start stretch">
  <div class="header"></div>

  <div class="main" layout="row" layout-align="center stretch">
    <div class="menu" flex="25"></div>
    <div class="content" flex="50"></div>
    <div class="ad" flex="25"></div>
  </div>

  <div class="footer"></div>
</div>
the styles are just for you to see the boxes (and some height in a couple of cases
k
blob
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:20 UTC
works for you?
well, the middle panels are not taking up the available space - when I resize the window, the width is filled, but not the height
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:22 UTC
you want height too? remember that this will be relative to viewport size
yeah - that's the part that's killing me
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:22 UTC
but if you still want it, you can put flex on the main div
<div class="main" layout="row" layout-align="center stretch" flex>
made no difference
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:24 UTC
yeah, because of parent.. give me 1 minute
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:29 UTC
hmmm... do you use ng-app or bootstrap?
ng-app
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:31 UTC
in anycase, I repeat the code with some changes:
<style>
.header { background-color: green; height: 100px;}

.menu { background-color: yellow; }
.content { background-color: blue; }
.ad { background-color: red; }

.footer { background-color: purple; height: 100px;}

</style>

<div layout="column" layout-fill layout-align="start stretch">
  <div class="header"></div>

  <div class="main" layout="row" layout-align="center stretch" flex>
    <div class="menu" flex="25"></div>
    <div class="content" flex="50"></div>
    <div class="ad" flex="25"></div>
  </div>

  <div class="footer"></div>
</div>
removed the main class and set its div with flex....
now, why it may not work? because if a parent doesn't want to grow in height, a flex child won't make it grow (normally).
is that why I only see the green and purple now ?
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:33 UTC
if you have a <div ng-app="myCoolestApp">, you either need to set it to 100% height or simply put it on the outermost div in my code.
I have a
<html ng-app="xxxx">
with a <section ui-view></section> for the routing
in index.html
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:34 UTC
and this code inside that view, right?
yup
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:35 UTC
make section 100% height
at least with min-height
you da man
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:35 UTC
flex da boss
so why would the green and purple show, but not the main ?
unless the 100% is put in?
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:36 UTC
conclusion: flex is normally about grabbing available unused *existing space. Normally doesn't force parents to grow.
well, thanks for the help - it is much appreciated. going to go and hack this code to understand what is going on
many thanks
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:37 UTC
well, if height is auto, parent will adapt to son. main section has a initial height of 0.... Plus the available extra space which is 0. So 0 + 0 = Nothing to see.
Again, flex is about extra available space. Since main doesn't have its own height and the parent won't give any extra, it won't be visible.
if the parent give an extra, the son will grab it (which is what happens: both header and footer has its own, main eats the rest).
replace son with child, but you know what I mean.
have fun with flex and angular material layouts. Together they make layout life so much simpler ;)
umm .. ;)
is there the same sort of trick to make a tab content fit available height, rather than the size of it's children ?
ok, so I think I got a solution to the "make the tab fit the available space" problem, with help from http://plnkr.co/edit/CMO1vC3JJlSuYJ0C7p0v?p=preview