style classes vs mixins > rendering differences

[manfield]

Due to the "/deep" deprecation, we're refactoring the whole application, substituting classes to mixins.
It seems we have some issues on flex applied to vertical layout.

This is the block, before refactoring:

Let's consider the block labeled "Firma"

<!--FIRMA -->
            <div class="vertical layout cell" 
            on-tap="onToggleFirmaPrincipale"
            >
                <div class="title">Firma</div>
                <div class="horizontal layout flex">
                    <div style="pointer-events: none;" class="self-center">
                        <paper-checkbox
                            disabled='[[_static("App.Firma.IsEnabled",value,classe)]]' 
                            checked="[[_isSignedPrincipale(value._rnd)]]"
                        ></paper-checkbox>
                    </div>
                </div>
            </div>
<!--//FIRMA -->

This is how it appears after:

<!--FIRMA-->
            <div class="mgs-vertical cell" 
            on-tap="onToggleFirmaPrincipale"
            >
                <div class="title">Firma</div>
                <div class="mgs-flex mgs-horizontal">
                    <!--  PREVENT TOOGLE EVENT -->
                    <div style="pointer-events: none;" class="mgs-self-center">
                        <paper-checkbox
                            disabled='[[_static("App.Firma.IsEnabled",value,classe)]]' 
                            checked="[[_isSignedPrincipale(value._rnd)]]"
                        ></paper-checkbox>
                    </div>
                </div>
            </div>
<!--//FIRMA-->

where

            .mgs-flex{
                @apply(--layout-flex);
            }
            .mgs-horizontal{
                @apply(--layout-horizontal);
            }
            .mgs-vertical{
                @apply(--layout-vertical);
            }
            .mgs-self-center{
                @apply(--layout-self-center);
            }

It seems that flex inside a vertical layout stretches completely the element to the full height, going over other sibling divs.

Other stuff works as expected (except horizontal and vertical reverse, we opened an issue yesterday).

[notwaldorf]

Is there a chance you could repro this in a jsbin, please? Here's a sample one to get you started: http://jsbin.com/cagaye/edit?html,output

[manfield]

Hello,
I reproduced here:
http://jsbin.com/pitikinupu/edit?html,output

In my example I tried to put a height in the first vertical layout div. It makes flex sub-div behave normally.
Actually the difference between the mixins version and old layout classes is that I need to explicitly specify a height, for the container, to make it work.

In any case I think the two divs should not overlay.

Try to give a look.
Thanks a lot.

[notwaldorf]

Eeek, sorry for dropping the ball on this issue. I'll take a look tomorrow!

[manfield]

toc toc :)

[notwaldorf]

The bug seems to be coming from the --layout-flex application on the inner horizontal container (that holds the header and the checkbox). After removing that, it's fine: http://jsbin.com/pewala/edit?html,output

The classes and mixins versions for the flex-basis of .flex and --layout-flex are completely different, but I don't know why that's the case.

@keanulee @frankiefu Any idea why this is? My flexbox fu isn't this strong

[keanulee]

@notwaldorf What exactly is the issue? I opened the two jsbin links above, and I don't see any overlapping divs (i.e. header and content are adjacent, not overlapping).

[manfield]

This is the issue:

You may see the same in the very first comment of this thread:

[notwaldorf]

I don't think I can reproduce this anymore. Here's the same jsbin, updated: http://jsbin.com/pewala/edit?html,output

The mixin and classes version look the same, with the same DOM:

Please let us know if this is still an issue for you.

[manfield]

Hi, yes I tried yesterday after a framework update. The issue seems to be solved by latest releases.
Thanks a lot for your support.