Polymer 1.0 iron-flex-layout only works on some tags

Question

Update: The polymer docs are now updated to reflect the answer below

I'm doing a polymer 1.0 app.

I'm trying to layout some paper toolbars on part of the screen horizontally.
It seems I can get iron-flex-layout's @apply(--layout-horizontal) to work on some elements but not on others.

I put together a little test below to show whats going on.
The funny thing is that if I copy the contents of the --layout-horizontal style into the tag in chrome dev tools it works. It also works if I just copy the contents of --layout-horizontal into a new style.

Here is the example of whats going on.

The first div is the example from the 0.5 to 1.0 migration guide.
The second div is the example but instead trying to layout a section instead of a span.
The third line is where I explicitly copied and applied the --layout-horizontal style.

enter image description here

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">

<dom-module id="layout-test">

    <style>
        /* Example from migration guide */
        .header {
            @apply(--layout-horizontal --layout-center);
        }

        /* A hack that makes it work */
        .hack {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;

            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
        }
    </style>

    <template>

        <!-- Working example from migration guide  -->
        <div class="header">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <span class="name">name</span>
        </div>

        <!-- This example does not work  -->
        <div class="header">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <section class="name">name</section>
        </div>


        <!-- This hack works fine -->
        <div class="hack">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <section class="name">name</section>
        </div>

    </template>
</dom-module>
<script type="text/javascript">
    Polymer({
        is: 'layout-test'
    });
</script>

Full project is available here https://github.com/nburn42/polymer-1.0-LayoutTest

Thanks,
Nathan

unxn3rd unxn3rd · Accepted Answer · 2015-06-06T18:04:02

According to issue 1601 on polymer's github (https://github.com/Polymer/polymer/issues/1601), they changed the way Custom CSS mixins can be passed to @apply. Instead of chaining multiple mixins in a single @apply call, you have to separate them. this means the following code snippet:

  .header {
        @apply(--layout-horizontal --layout-center);
    }

becomes:

  .header {
        @apply(--layout-horizontal);
        @apply(--layout-center);
    }

Polymer really needs to update the documentation as well as the examples on their site as changes like this not being reflected will result in less people adopting Polymer.

Polymer 1.0 iron-flex-layout only works on some tags

1 Answers