Adjust to content height

[dominikIncibit]

If you add this line of css, the pages automatically adjust to the height of their content:

iron-swipeable-pages > .iron-selected { position: inherit; }

I would say this behaviour should be preferred opposed to always being forced to set an explicit height on the iron-swipable-pages element.

[MeTaNoV]

I am doing some test and will eventually merge, sorry, I was very busy the last weeks! :)

[n1ywb]

Unfortunately this breaks the swiping animation on my browser (chromium 53)

Here it is paused mid swipe, working normally with a fixed height:

And here it is with position: inherit; note the right page has disappeared

it's too bad because it seems to work pretty well otherwise... I'm looking into it further

[n1ywb]

I think I got it, you need to peg the page elements top: 0px; put together it looks like this

  iron-swipeable-pages > .iron-selected { position: inherit; }

  iron-swipeable-pages > * {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    cursor: default;
    height: 100%;
    top: 0px; /* <-- fixes position: inherit layout issue */
    /*position: inherit;*/
  }

Now my transitions all look good and everything seems to work as expected

here is what the failure looks like in the debugger

You can see my right-page div is being placed below the bottom of the screen, hence pegging top: 0px

[n1ywb]

as a bonus it preserves scroll position for free