polymer-flex-layout

[david.k...@gmail.com]

I am having trouble making a flex layout, and wondered if someone could tell me what I am doing wrong, or if this is even what flex-layout is for.

I have this code loaded in my app:

<polymer-element name="s-app">
  <link rel="import" href="../bower_components/polymer-ui-tabs/polymer-ui-tabs.html">
  <link rel="import" href="../bower_components/polymer-ui-animated-pages/polymer-ui-animated-pages.html">
  <link rel="import" href="../bower_components/polymer-flex-layout/polymer-flex-layout.html">
  
  <template>   
    <polymer-flex-layout isContainer vertical>
 
      <header>
        Header
      </header>
      
      <polymer-ui-animated-pages selected="{{page}}" flex>
        <div>Page One</div>
        <div>Page Two</div>
        <div>Page Three</div>
      </polymer-ui-animated-pages>
 
      <polymer-ui-tabs selected="{{page}}">
        <span>One</span>
        <span>Two</span>
        <span>Three</span>
      </polymer-ui-tabs>
 
    </polymer-flex-layout>
 
  </template>
 
  <script>
    //switch page on tab
    Polymer('s-app', {page:0});
  </script>
 
</polymer-element>

The tab-switching works great, but layout is not right. What I am hoping to do is this (where each drawing is full-height of browser window):

[Yvonne Yip]

polymer-flex-layout makes its parent a flexbox. Try this:

<template>
  <polymer-flex-layout isContainer vertical></polymer-flex-layout>

  <header>
    Header
  </header>    
  <polymer-ui-animated-pages selected="{{page}}" flex>

  // etc..
</template>

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[david.k...@gmail.com]

I tried that, it didn't do it. Also, I thought isContainer is for just this use-case (use as flexbox container)

Also tried this (with div wrapper) with same results:

<polymer-element name="s-app">

  <link rel="import" href="../bower_components/polymer-ui-tabs/polymer-ui-tabs.html">

  <link rel="import" href="../bower_components/polymer-ui-animated-pages/polymer-ui-animated-pages.html">

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

  

  <template>   

    <div>

      <polymer-flex-layout isContainer vertical></polymer-flex-layout>

      <header>

        Header

      </header>

      

      <polymer-ui-animated-pages selected="{{page}}" flex>

        <div>Page One</div>

        <div>Page Two</div>

        <div>Page Three</div>

      </polymer-ui-animated-pages>

      <polymer-ui-tabs selected="{{page}}">

        <span>One</span>

        <span>Two</span>

        <span>Three</span>

      </polymer-ui-tabs>

    </div>

    

  </template>

  <script>

    //switch page on tab

    Polymer('s-app', {page:0});

  </script>

</polymer-element>

[david.k...@gmail.com]

Also, I can tell it's loading correctly because it looks like this, without vertical:

Here is the code that made the above:

<polymer-element name="s-app">

  <link rel="import" href="../bower_components/polymer-ui-tabs/polymer-ui-tabs.html">

  <link rel="import" href="../bower_components/polymer-ui-animated-pages/polymer-ui-animated-pages.html">

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

  

  <template>   

    <polymer-flex-layout isContainer>

[Yvonne Yip]

Sorry, didn't see the "isContainer". Did you check if the flex container has a height?

[david.k...@gmail.com]

I can set height to "100vh", but that seems to defeat the purpose, if I am understanding what it's for. If I set it to "100%" it has no effect.

[david.k...@gmail.com]

This seems to do it: https://gist.github.com/konsumer/8428219

I guess I was hoping for  something that didn't use vh or hard-coded percentage widths (for variable-sized tab-menu) but this works alright.

thanks for your help!

[david.k...@gmail.com]

Here is the whole thing, which looks pretty nice with minimal styling:

https://gist.github.com/konsumer/8428281

[Scott Miles]

Hi,

I believe you have suffered some fairly common confusion between 'sizing content to fit a container' and 'sizing a container to fit content'. The browser normally tries to make things as big as their content (at least, vertically). 

When you use something like flex layout (or overflow: scroll, for that matter) you are asking for the opposite behavior, and you have to make sure the container has a size so the layout knows how much room to use. Otherwise, the browser gets confused and all sizes go to 0.

This problem affected you in at least two places. `s-app` itself has no sizing information (so it's sizes are 0), and neither did the `polymer-flex-layout` (until you added the 100vh).

Here is a slightly different version:

http://jsbin.com/uXUSUDU/3/edit

In this version,I used these concepts:

(1) use polymer-flex-layout without `isContainer`

If `polymer-flex-layout` is a container, you have to size it too. If you let it use the element as container, then we only have to make sure the element itself has size.

(2) make sure `s-app` has size

There are several ways to do this, but none of them are zero-configuration. In my example, I first made sure `s-app` has 'display: block' (so it's more like a DIV than a SPAN), and then I used position: relative and height: 100% to size both body and s-app to fill the viewport.

An alternative is to give `s-app` height: 100vh, then you don't need the position: relative or height: 100% styles on body/html. I didn't show this version because 'vh' is (very slightly) less supported than `%`.

I hope this helps. Please follow up if you have any questions.

Scott

P.S. They way you used #page in the main document to style an element inside of ShadowDOM won't work under native ShadowDOM. It works under the ShadowDOM polyfill only because it's extremely difficult for the polyfill to enforce style scoping.

[Scott Miles]

Oops, I forgot to discuss polymer-ui-tabs.

polymer-ui-tabs uses a flex layout, so you can cause the tabs to have 'stretch' behavior but putting 'flex' attribute directly on the tab (span) itself. You can see this in my JsBin.

This way is more flexible and accurate, and you don't have to have explicit sizing (aka width: 33%) in your stylesheet.

[david.k...@gmail.com]

Awesome info. Thanks so much!