These are chat archives for angular/material

26th
Mar 2016
jmls
@jmls
Mar 26 2016 09:46
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
Tim
@4tron
Mar 26 2016 09:47
layout-fill ?
so no flex
jmls
@jmls
Mar 26 2016 09:47
I know, I know that this should be simple - but I have tried every combination of layout=row/column/flex
aaaaarggghhhh :(
Tim
@4tron
Mar 26 2016 09:48
yeah true the layout stuff is a bit messy
prefer semantic-ui
jmls
@jmls
Mar 26 2016 09:48
so, atm I have
yeah - but I use angular
<section ui-view></section>
as the main html
and
Tim
@4tron
Mar 26 2016 09:49
geez i wish semantic had an angular module
Johannes Pichler
@joeherold
Mar 26 2016 09:49
Easy
jmls
@jmls
Mar 26 2016 09:50
please god let it be so ;)
Johannes Pichler
@joeherold
Mar 26 2016 09:50
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
@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
To be scrollable: md-content inside md-content
Ore even more easy: body has layout row.... Then 3 containers with flex
jmls
@jmls
Mar 26 2016 09:54
@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
its CSS at the end, so... we all work to make it simple but oh man, sometimes the way is quite rowdy ;)
jmls
@jmls
Mar 26 2016 09:59
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
ok, lets start working something out so you tell me what more fixes you may need....
give me 2 minutes
jmls
@jmls
Mar 26 2016 10:02
man, I appreciate this
Johannes Pichler
@joeherold
Mar 26 2016 10:03
@jmls you need to get used of the CSS flex box model system. Then you understand the material flex
jmls
@jmls
Mar 26 2016 10:04
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
Check out the link
This is the best explanation I know so far. Helped me a lot
jmls
@jmls
Mar 26 2016 10:06
thxs
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:17
@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
jmls
@jmls
Mar 26 2016 10:19
k
blob
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:20
works for you?
jmls
@jmls
Mar 26 2016 10:21
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
you want height too? remember that this will be relative to viewport size
jmls
@jmls
Mar 26 2016 10:22
yeah - that's the part that's killing me
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:22
but if you still want it, you can put flex on the main div
<div class="main" layout="row" layout-align="center stretch" flex>
jmls
@jmls
Mar 26 2016 10:23
made no difference
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:24
yeah, because of parent.. give me 1 minute
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:29
hmmm... do you use ng-app or bootstrap?
jmls
@jmls
Mar 26 2016 10:31
ng-app
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:31
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).
jmls
@jmls
Mar 26 2016 10:33
is that why I only see the green and purple now ?
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:33
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.
jmls
@jmls
Mar 26 2016 10:34
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
and this code inside that view, right?
jmls
@jmls
Mar 26 2016 10:34
yup
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:35
make section 100% height
at least with min-height
jmls
@jmls
Mar 26 2016 10:35
you da man
Manuel Pacheco
@ShadowManu
Mar 26 2016 10:35
flex da boss
jmls
@jmls
Mar 26 2016 10:36
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
conclusion: flex is normally about grabbing available unused *existing space. Normally doesn't force parents to grow.
jmls
@jmls
Mar 26 2016 10:37
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
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 ;)
jmls
@jmls
Mar 26 2016 12:01
umm .. ;)
is there the same sort of trick to make a tab content fit available height, rather than the size of it's children ?
jmls
@jmls
Mar 26 2016 16:16
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