These are chat archives for angular/material

16th
Dec 2015
jean-morissette
@jean-morissette
Dec 16 2015 02:43
@craigsh Thanks!
Patrick Finkbeiner
@pfinkbeiner
Dec 16 2015 16:46
Uaaagh! That flexbox thing drives me nuts! Can someone please help me to achieve this layout?? (Screenshot incomming…)
Screen Shot 2015-12-16 at 17.45.29.png
The basic setup is clear. The problem is the height from sidebar and content section
They will fill the screen and i’ve tried different column/row combinations. Even the usage of layout-fill is not very clear to me
can someone explain?
Matthew McLeod
@vai
Dec 16 2015 17:57
flex increases the box to fill perpendicular to the layout-direction of the parent, layout-fill fills in the direction of the parent.
Patrick Finkbeiner
@pfinkbeiner
Dec 16 2015 18:01
yeah I know that but I have problem to strech out the sidebar on full height with a simple flex in layout column combination
I can achieve it by using custom css with some height: 100% and overflow: hidden but i thought this should be much easier using flexbox
@vai can you create a codepen or something?
Craig Shearer
@craigsh
Dec 16 2015 18:10
@pfinkbeiner I struggled with getting this layout to work in all browsers but it's possible. Have a look at the codepen at the bottom of this page: https://material.angularjs.org/latest/layout/tips
md's flexbox and flexbox flexbox work okay together too
Sanket Saurav
@sanketsaurav
Dec 16 2015 18:35
Hey folks! I'm having a little bit difficulty understanding the differences on where to use layout-fill and flex while designing layouts. I'm trying to achieve a layout like this - http://codepen.io/sanketsaurav/pen/zrryyo. Any help would be appreciated!
Erwan DATIN
@MacKentoch
Dec 16 2015 20:41

@sanketsaurav I won't tell I give you the absolute answer but I will tell you about the way I use it.

I use layout-option on parents elements then flex is some kind state to say this is flexible that I define on children elements.

By the way flex means flex=100%, it could be defined to other value.