Advice on passing a fullbleed Polymer flexbox layout through the router

JayBeavers commented 9 years ago

I'm writing a full-screen app (fullbleed) and relying on the flexbox/layout features of Polymer for my layout design.

When I moved to the app-router approach, I lost my screen measurements and have been working through the implications since. At this point, I'm liberally applying 'layout/flex' to my app and I seem to be getting somewhere, but I'm still losing my flexbox support when I cross the app-route/import boundary.

Before I go trundling down the path of debugging/modifying app-router itself, is this something others have played with in the past? Is there an established pattern I should be following? Unfortunately I'm simultanouesly new to Polymer, flexbox/layouts, and app-router at the same time so I'm not really certain what is 'supposed' to work and what needs custom coding.

Right now my pseduo-code is looking like:

<html>
  <body fullbleed layout vertical unresolved>
    <app-router flex layout vertical>
      <app-route flex layout vertical> <!-- flex here isn't working as its dividing the screen real-estate amoung all my routes, I really mean 'flex but only on the active route' -->
        <imported-page-template flex layout vertical> <!-- flex isn't working at all here, does not seem to cross the import boundary -->
          ...

Any thoughts for the lost and weary?

erikringsmuth commented 9 years ago

I have some experience with flexbox but I'm definitely not an expert. I haven't dealt with it too much with the app-router since I typically use core-scaffold for my layouts which sets the size to fill the screen.

This part looks correct.

<html>
  <body fullbleed layout vertical unresolved>
    <app-router flex layout vertical>
      <app-route flex layout vertical>

As for the app-route, I would expect that it would actually fill the whole screen if none of the other route's have content inside them (only 1 should at a time the way the router is coded).

The deepest child should look like 1 of these if you're importing a template or custom element.

imported template

<template>
  <div flex> <!-- layout vertical is only needed if the child of this should be able to flex to the full height -->
    <p>your content</p>
  </div>
</tempate>

imported custom element

<polymer-element name="your-page" flex noscript> <!-- layout vertical is only needed if the child of this should be able to flex to the full height -->
  <template>
    <p>your content</p>
  </template>
</polymer-element>

The last thing you can try is the fit attribute https://www.polymer-project.org/docs/polymer/layout-attrs.html#general-purpose-attributes. This is the old-school (not flexbox) way of filling the screen.

JayBeavers commented 9 years ago

OK, thanks for the advice. I was able to narrow down the attributes to get the system 'working as expected', at least after moderate testing to:

    <html>
      <body fullbleed layout vertical unresolved>
        <app-router>
          <app-route import='...'>
            <polymer-element>
              <template>
                <div layout vertical center>
                  ...

This seemed to pick up the information it needed, my missing step was that I needed a containing div inside the template of my polymer-element/page.

I was using <template layout vertical center> and that worked in some other scenarios but not in this one.

erikringsmuth / app-router

Advice on passing a fullbleed Polymer flexbox layout through the router #63