layout-margin / layout-padding and flex="?"

[tinusn]

In release 0.10.x adding layout-margin and layout-padding to a parent container and then adding flex="?" to a child works as expected, but in 0.11.2 it does not.

Here is a codepen demonstrated the issue:

0.10.1
0.11.2 (not, this one does not work at all... dunno why)

And here is a codepen with just flex, that works in 0.11.2
0.11.2 - flex

The issue seems to be that the new class based approach does not add "flex" to the class list and is thus not hit by the following:

.layout-margin, .layout-margin > .flex, .layout-margin > .flex-gt-sm, .layout-margin > .flex-md, .layout-margin > .flex-lt-lg {
  margin: 8px; }

In 0.10.1:

<div layout="row" layout-margin>

becomes

<div layout="row" class="layout layout-row layout-margin">

whereas in 0.11.2 it becomes:

<div class="md-layout-row layout-margin">

[panzershreck]

+1

[mattiLeBlanc]

probably related: Flex turns into class="flex-flex"

#5044

[Sebastien-Meiffren]

+1
my workaround is to add the css class flex to the flexed element

[ThomasBurleson]

@tinusn - Here is a CodePen that shows the working v0.11.2 Layout features: http://codepen.io/ThomasBurleson/pen/RWgqom

<div ng-app="demoApp" layout="column" layout-fill>
  <div layout="row" layout-margin flex>
    <div class="one" flex="20"> test1 </div>
    <div class="two" flex="80"> test2 </div>
  </div>
  <div layout="row" layout-padding flex >
    <div class="one" flex="20"> test1 </div>
    <div class="two" flex="80"> test2 </div>
  </div>
</div>

You need to create the ng-app (so the ngMaterial Layout directives run) and you need layout-fill:

[tinusn]

@ThomasBurleson The pen you have made still does not work?

Here is what I would expect (or at least, that is how it worked in 0.10.x):

But the pen you have made gives this:

Notice that there is no margin between the two first children, and no padding on the next two children.

I fixed the two pens in the beginning, so now the layout row/column works, but layout-padding and layout-margin still does not work. Finally I added a pen that shows that it works with just flex.

[rigobcastro]

In 0.11.1 it's works. In current version 0.11.2 you need add .flex class manually.

<div layout="row" layout-padding>
    <div class="flex" flex="20"></div>
    <div class="flex" flex="80"></div>
</div>

Pen: http://codepen.io/rigobcastro/pen/LpjNqe