polymerelements / iron-flex-layout Goto Github PK

Using massively flex layout in one of my project, I discovered some missing classes/mixins related to flex.
Concerning the alignment in cross axis, the following are missing:

    --layout-stretch: {
      align-items: stretch;
    };

and

    --layout-baseline: {
      align-items: baseline;
    };

Concerning, multi-lines, all classes / mixins related to align-content are missing.

We need to provide better explanation of how to use these layout styles.

For example, show how developers can do something like:
http://jsbin.com/zofidu/edit?html,output

The iron-flex-layout element leaks [hidden] CSS rule with !important declaration.

Expected outcome

The element should not leak CSS with important declaration.

Actual outcome

As soon as this element is included (when using shady DOM), it leaks following CSS:
https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html#L51-L53

Steps to reproduce

I have prepared a JS Bin. When you remove the (unused) iron-flex-layout import, the output is different.

The main issue is that the outcome is different when using shady DOM or shadow DOM. When using shady DOM, the CSS rule is leaked and thing look "correct". As soon as you switch to shadow DOM, things break when you use a display CSS property (see my JS Bin).

This issue got introduced with #26 which as required for IE according to the description. If you can provide a description which bug it fixes exactly, I'm happy to look into this issue and create a PR if possible.

Tested with Chromium 50.

On windows + chrome an extra scroller is displayed #396. It was fix somehow but now is back again.

The code sections on the following page are not visible. A bit odd (and maybe slightly embarrassing?) since the code samples are showing CSS layouts.

https://elements.polymer-project.org/guides/flex-layout

Since deep has been deprecated it's recommended to use mixins in our elements. However, let's say I make use of 10 different flex classes, I'll have to define all of those classes in my element. Even worse, now I have to remember defining those classes, so let's say I want to use flex-6, I can't just use it, I need to make sure it's defined. Why isn't there just something like one iron-flex-classes layout.html element that imports all the classes by default?

It seems the iron-flex-classes is supposed to be deprecated soon, so I'm not sure how we're supposed to deal with this? It's some serious overkill having to write all these mixin definitions over, and over, and over, and over (I hope I've made my point) again in each element.

This might make sense for writing just one re-usable element that needs to be used by other people if you submit your element for customelements.io but for one app that makes use of these mixins over and over again, it's very frustrating. Why don't we define a layout-flex-classes that applies all the mixins, so for example:

.flex-4 { @apply(--layout-flex-4); }

And use that as a shared style that we can easily import into any document that we know will use a lot of these styles? With any large app you'll end up eventually using almost every flex class. Our app is not that big yet and we're already using around half of all the flex mixins, so once that gets vulcanized you'll have all of those classes in one place anyway. I believe it should be easier to import all those classes (which did did with one html import that defines all those classes as described above.

there is a problem with scrolling in horizontal div in starter kit , everything in chrome windows and android is fine , but scrolling not working in phonegap/cordova webview

<div id="Mainlist1" class="layout horizontal scroll" >
                        <paper-material>Item 1</paper-material>
                        <paper-material>Item 2</paper-material>
                        <paper-material>Item 3</paper-material>
                        <paper-material>Item 4</paper-material>
                        <paper-material>Item 5</paper-material>
                        <paper-material>Item 6</paper-material>
                        <paper-material>Item 7</paper-material>
                        <paper-material>Item 8</paper-material>
                        <paper-material>Item 9</paper-material>
 </div>

solution?

so i can see how to use this..

For example: https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html

Where is the demo for this element?

Where is the documentation for this element?

I've been following the flex-layout guide and it says that you can use class="flex self-stretch" on a tag inside a tag with class="layout horizontal", so that all boxes use the same height.

Using a <paper-card> element, seems that the shadow doesn't apply correctly this behaviour, or I'm not smart enough to get it work without applying class="layout horizontal" again to my <paper-card>'s elements.

Maybe this issue should be submitted to https://github.com/PolymerElements/paper-card ?

Polymer rocks anyway!

https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html#L38-L43

.layout.horizontal,
.layout.vertical {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Should be:

.layout {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Because horizontal layout should be the default. Just like the mixin https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html#L59-L63

Hello Polymer team! Thank you for your great job and very clear documentation around here.

Reading the flex-layout guide, I have noticed that, even though it speaks about the soon-to-be deprecation, there are no mention of the new iron-flex-layout.html and iron-flex-layout-classes.html.

The documentation and demo within the repository are quite explicit about how to use these new elements, but users may look first at the deprecated documentation, leading them to erroneous usage.

I'd like to submit you a pull request (a minima a reference to the file inline documentation) but I haven't found the guide repository.

Thank you for reading,

grebett

This page isn't very smooth when zoomed in. Press control + to zoom in a few times and observe that the word "bar" disappears behind the cards. Not sure this is important, as it's just an issue on the demo page, but I wanted to flag it.

From the mailing list (https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/polymer-dev/ee0FIc_uiCg/iPPkGqFYRPsJ)

 --layout-fixed-bottom:,
    --layout-fixed-left:,
    --layout-fixed-right:,
    --layout-fixed-top: {
      position: fixed;
    }

position:fixed it not applied when one of these rules is used. Presumably because it is not parsed out properly. Haven't tried, only reporting :)

https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html#L278-L283

I've updated a Polymer element of mine when I've noticed the layouting did not seem to work anymore. After some digging, I've seen that I can import iron-flex-layout/classes/iron-flex-layout if I want to continue using the layout properties directly in the markup (as opposed to mix-ins).

It appears that using the above mentioned import, the /deep/combinator is again used (which will be deprecated, or already is?) which will layout the elements like before.

So my question:

• can we use the layout properties directly in markup without the need to import iron-flex-layout/classes/iron-flex-layout?

I've added a short example to illustrate the case (you will have to change the imports paths!):

<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Testing flex layouting</title>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <!-- ADJUST THE FOLLOWING TO YOUR ENVIRONMENT -->
    <link rel="import" href="../../polymer/polymer.html">
    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">

  </head>

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

  <style>
    .container {
      @apply(--layout-horizontal);
      @apply(--layout-wrap);
      background-color: gray;
    }

    .old {
      margin-top: 5px;
      background-color: gray;
    }

    .container div, .layout div {
      background-color: lightgray;
      padding: 5px;
      margin: 5px;
      width: 300px;
    }
  </style>

  <template>
    <div>Example using mixins</div>
    <div class="container">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>

    <div>Example using layout properties directly in markup</div>
    <div class="old layout horizontal">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </template>

  <script>
    Polymer({ is: 'flex-test' });
  </script>

</dom-module>

  <body unresolved full>
    <flex-test></flex-test>
  </body>
</html>

Hello I pretty new to Polymer and I was noticing that I could directly apply a iron-flex-layout class to an element, such as class="flex". The migration guide does not show this behavior it only shows that I can include these classes as a mixins. I also noticed that these iron-flex-layout classes that can be directly applied to an element come from a file in the iron-flex-layout folder, iron-flex-layout/classes/iron-flex-layout.html. How is this file being included in my project since I am not including it? Also, what should I use, mixins, direct styling, or both? Thanks.

https://github.com/PolymerElements/iron-flex-layout/blob/master/demo/index.html#L263 has <div class="container" id="demo10"> and also L245

Description

When using iron-flex class, in case you use .layout .horizontal or .layout .vertical, the hidden attribute is ignored.

I've realised that .layout overrides the display:none of the hidden attribute to display:flex.

I've also realised that if you import the iron-flex-layout class iron-positioning it sets : [hidden]{display: none !important;} so the hidden attribute works properly.

Expected outcome

The dom element to be hidden if you set the hidden attribute to it without having to include iron-positioning

Actual outcome

The dom element is displayed

Live Demo

I've created this JSbin that allows to reproduce it.

Steps to reproduce

1. Include iron-flex class to your element style
2. Set some dom element to hidden and add to it the classes .layout .horizontal or .layout .vertical
3. If you import the class iron-positioning works fine
   • Chrome
   • Firefox
   • Safari 9

   (Not tested in the browsers below)

   • Safari 8
   • Safari 7
   • Edge
   • IE 11
   • IE 10

In console I see the message:

This file is deprecated. Please use iron-flex-layout/iron-flex-layout-classes.html, and one of the specific dom-modules instead

I removed all imports for that dependency, but official polymer components still use this, for example:

iron-image.html
paper-item.html

and others..

We aren't using any CSS variables or CSS Mixins here. And the https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html contains no Polymer specific syntax except for the <style>s to be wrapped inside <dom-module>s.

Why not just take it out in a regular CSS file? Not only will it be a great boon for non-Polymer projects (greater interops will lead to greater contributions, in my opinion), but also the syntax becomes cleaner in Polymer Projects. No more

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>

Description

The demo for iron-flex-layout makes firefox crash (unusable to be more precise).

https://elements.polymer-project.org/elements/iron-flex-layout?view=demo:demo/index.html&active=iron-flex-layout

Expected outcome

go to the page: https://elements.polymer-project.org/elements/iron-flex-layout?view=demo:demo/index.html&active=iron-flex-layout
with firefox and see a demo.

Actual outcome

The page seems to perform a very heavy computation that never ends.
The only way out is to force quit Firefox, even then, after restarting, Firefox is still slow every time when a iron-flex-layout page is approached in the polymer elements section (https://elements.polymer-project.org/elements)

Steps to reproduce

1. Open the above url in Firefox

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

According to the documentation, it seems that include attributes can be applied to a "custom-style" element.
https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules

However, I have gotten rendering issues with Chrome when serving a gzipped, Vulcanized page that uses the following:
(Strangely, when opening the uncompressed, Vulcanized page locally, I do not have the same rendering issue.)

<style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
  :root{...styles...}
</style>

When I split the include attribute to its own empty tag, everything seems to render correctly:

<style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
</style>
<style is="custom-style">
  :root{...styles...}
<\style>

As an aside, I've tested Firefox, Edge, and IE11. They all seem to render properly, regardless of the include attribute's location.

Is the include attribute not meant to work with a custom-style tag that has contents?

There are mixins for all the other align-items values (flex-start, flex-end, center, baseline), but it doesn't look like there's a mixin for align-items:stretch yet.

From @markstewie on November 17, 2015 0:46

In latest (v 1.2.2) after running polybuild through gulp there is a runtime error here....

// line 2998 of polymer.html
properties[m[1]] = (m[2] || m[3]).trim();

The runtime error says...

Uncaught TypeError: Cannot read property 'trim' of undefined

Copied from original issue: Polymer/polymer#2747

It seems that the code below is not working:

    --layout-fixed-bottom:,
    --layout-fixed-left:,
    --layout-fixed-right:,
    --layout-fixed-top: {
      position: fixed;
    };

Hello,

I just spent some time wondering why my different flex boxes with a flex-2 class weren't of the same height in a vertical layout (height was varying depending on the content).
I had another working example with boxes using flex class with "fixed" heights.

I found on the net that the grow attribute was related to a flex-basis factor, and to assure elements to be the exact same height/width, this flex-basis attribute had to be 0.
Then I noticed that this factor was set to ~0 only on the flex-1class.

Is this behavior has been developed in a purpose ?

Thanks for your help

I would like to align the first two <li> to the left and the third <li> to the right like this:

<ul class="layout horizontal start-justified">
  <li>one</li>
  <li>two</li>
  <li class="self-end">three</li>
</ul>

Note that class="self-end" applied to the third <li> doesn't do the job because according to the guide, it aligns the third <li> to the bottom of its container.

There are some definitions in the classes version of layout.html that's not in the custom variables version.

line 235 has a semi-colon !

By using a <style is="custom-style"> in iron-shadow-flex-layout.html we can ensure that only users of Shadow DOM are using the deprecated /deep/ styling. This will make it easier to determine how many users are actually relying on the deprecated /deep/ combinator.

tl;dr - Basically, the mixin versions of --layout-horizontal-reverse and --layout-vertical-reverse are broken.

Notice how --layout-horizontal-reverse and --layout-vertical-reverse are missing the crucial display properties present in --layout-horizontal and --layout-vertical. From iron-flex-layout/iron-flex-layout.html:

--layout-horizontal: {
  /* @apply(--layout); */
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
};

--layout-horizontal-reverse: {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
};

--layout-vertical: {
  /* @apply(--layout); */
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
};

--layout-vertical-reverse: {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
};

This doesn't seem to be consistent with how the classes are treated. From iron-flex-layout/classes/iron-flex-layout.html:

.layout.horizontal,
.layout.horizontal-reverse,
.layout.vertical,
.layout.vertical-reverse {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

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).

Are we going to add an equivalent of the 0.5 auto-vertical attribute? I don't know whether it's important or not -- I just noticed in trying to update the docs that there appeared to be no equivalent in iron-flex-layout.

"General purpose ruls" should read "General purpose rules."

https://elements.polymer-project.org/elements/iron-flex-layout?view=demo:demo/index.html&active=iron-flex-layout

From iron-flex-layout.html#L21:

<style is="custom-style">
  :root {
    --layout: {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
    };
   ...
  }
</style>

This seems to force a flex layout on the body element, throwing off the entire viewport's layout.

Css style applied:

How the viewport renders:

I'm also using ng-boilerplate and this issue is only evident post build.

Hi !

I'm currently working on my personal website using Polymer 1.0. Therefore, I had to migrate from its previous version, and I found out that the behavior of "iron-flex-layout", or more precisely the styling with mixins it provides, does not match the migration notes. Indeed, notes are suggesting that you can @apply(...) several mixins at the same time (c.f. screenshot), but it doesn't seem to work, as described in an issue from the 0.9.1 here : Polymer/polymer#1601.

I guess that the "Layout" part of migration notes should be updated to match how it should be used as it can be very misleading (and also, the < link rel="import" > tag corresponds to a previous version of the layout component should be updated).

Thanks :)

Hi,

I have started learning polymer. To start with my learning project first I tries to create a simple webpage with iron-flex-layout.

So I have used the below code as per the the information given in using elements.

<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<script src="lib/polymer/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="lib/polymer-elements/iron-flex-layout/iron-flex-layout.html">
<style is="custom-style">
.flex {
@apply(--layout-horizontal);
}
</style>
</head>
<body>

    `<div class="container flex">
      <div>one</div>
      <div>two</div>
      <div>three</div>
    </div>
</body>`

</html>

But when I open the browser the I am not able to see the layout as expected. It is just printing the following:

one
two
three

Not

one two three

Could you please help.

Regards,
Ramakrishna

Description

Similar to issue #96 the row, row-reverse, column, and column-reverse properties should be in their own mix-ins to allow for more flexibility.

Then these can also be applied to --layout-horizontal/-reverse and --layout-column/-reverse to decrease maintenance.

Expected outcome

     --layout: {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      };

      --layout-direction-row: {
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
      };

      --layout-horizontal: {
        @apply --layout;
        @apply --layout-direction-row;
      };

      --layout-direction-row-reverse: {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
      };

      --layout-horizontal-reverse: {
        @apply --layout;
        @apply --layout-direction-row-reverse;
      };

The changes in 1.2.2 caused issues when using minifyInline. Specifically, the rules like this:

     --layout-horizontal: {
      @apply(--layout);

      -ms-flex-direction: row;
      -webkit-flex-direction: row;
      flex-direction: row;
    };

aren't processed correctly and break those layouts.

The fix is to move @apply(--layout); to the end instead of the start (not sure why).

I think you know the changes were also a problem in the polymer-starter-kit and caused them to remove minifyInline from their build process.
Polymer/polymer-starter-kit#564
Polymer/polymer-starter-kit#561

I know there are caveats about minifying and Polymer because of some of the unique things you folks do with styles, but it had been working fine up to this point and this fix is pretty trivial.

I have a PR ready to fix this if you want it.

Using Polymer 1.1, in Chrome the elements are centered when the screen is resized smaller. But in Firefox, they shift to the left.

<dom-module id="portfolio-display">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 100%;
      width: 100%;
      background-color: var(--paper-grey-50);
     }
    #main {
      width: 100%;
      margin-top: 50px;
    }
  </style>

  <template>
    <template is="dom-if" if="{{show}}">
      <iron-media-query query="(min-width: 900px)" query-matches="{{queryMatches}}"></iron-media-query>
      <div id="main">
        <div class="layout vertical center center"> 
          <portfolio-first-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-first-row>
          <portfolio-second-row  class$="{{computeMediaSize(queryMatches)}}"></portfolio-second-row>
          <portfolio-third-row  class$="{{computeMediaSize(queryMatches)}}"></portfolio-third-row>
        </div>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: "portfolio-display",
      properties: {
        show: {
          type: Boolean,
          reflectToAttribute: true,
          value: false
        }
      },
      toggleShow: function() {
        this.show = !this.show;
      },
      computeMediaSize: function (smallScreen) {
        if (!smallScreen) {
          return "layout vertical center center";
        }
      }
    });
  </script>
</dom-module>

--layout-vertical, --layout-vertical-reverse should have min-height: 0,
--layout-horizontal, --layout-horizontal-reverse should have min-width: 0
http://stackoverflow.com/questions/29907626/flexbox-max-height-interpretation-change-on-chrome#answer-29909047

Without those, the rendering on chrome canary and firefox breaks.

Not visible here : https://elements.polymer-project.org/elements/iron-flex-layout

Also on the migration page (https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) link to the demo doesn't work :

We recently updated to the latest version of iron-flex-layout. We spent the better part of the day trying to figure out why all of our interfaces were suddenly out of kilter. It turns out that since we make heavy use of the flex CSS classes, the import needed to change to "iron-flex-import/classes/iron-flex-import.html". The top level documentation for the component (not the guide) should be updated to with a notice that anyone updating to this version needs to make the appropriate path change in their imports. That kind of breaking change needs to be really obvious and highlighted in the documentation.

There is --layout-start, --layout-center, and --layout-end. But no --layout-stretch.

Is there a reason for this being missing, or just a bug?

Browser returns the folowing warning:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.

Just a placeholder for now I guess, but the /deep/ combinator is currently deprecated, and it looks like piecing combinators are on the way out too

https://www.chromestatus.com/features/6750456638341120
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/68qSZM5QMRQ/pT2YCqZSomAJ

This means iron-shadow-flex-layout.html will need to be rewritten.

https://elements.polymer-project.org/elements/iron-flex-layout?view=demo:demo/index.html&active=iron-flex-layout

the titel of the example for "Justification, center justified" wrongly says "Justification, start justified" instead of ""Justification, center justified""

Hi,

I don't know if the issue comes from the iron-flex-layout or Safari's render engine.

The followings works on Chrome, Firefox, IE and Edge. Only Safari doesn't wrap the child elements

This is the code basics

CSS

    .testContainer{
        background-color:lightGray;
        padding:5px;
    }

    .testBox{
        background-color:whitesmoke;
        margin:5px;
        min-width: 500px;
    }

HTML

       <div class="layout horizontal wrap testContainer">
            <div class="flex testBox">min-width:500px
            </div>
            <div class="flex testBox">min-width:500px
            </div>
            <div class="flex testBox">min-width:500px
            </div>
        </div>

https://github.com/PolymerElements/iron-flex-layout/blob/master/demo/demo-snippet.html#L36

Is this for a specific reason?
I'm working on porting the demos to Dart and run into an issue that the template in attached() is empty.
I don't think it's related, I just try to understand the demo code better.