Layout issue with neon-animated-pages

[PaulHMason]

I'm having an issue with neon-animated pages layout. I have the following markup within a Polymer control template, but if I use neon-animated-pages the footer appears above the pages. It works as expected with iron-pages. Is there any simple way of getting the expected behavior?

<div id="header">
    Header
</div>

<!--
<neon-animated-pages id="pages" selected="{{selected}}" on-iron-deselect="_onStepLeave">
    <content select="my-child"></content>
</neon-animated-pages>
-->

<iron-pages id="pages" selected="{{selected}}" on-iron-deselect="_onStepLeave">
    <content select="my-child"></content>
</iron-pages>

<div id="footer">
    Footer
</div>

[ajtam]

Hi,

Both neon-animated-pages and iron-pages don't have a specified height in their styling so they only become as big their child elements.

The problem is in neon-animated-pages, the content is given position:absolute in order to make the pages properly animate (you can see this yourself by removing the attribute and watching the animations)

A suggested solution is to give neon-animated-pages a height in one of your stylesheets (eg. height: 100% ) but choose carefully or the pages will cover your footer.

Another suggestion is to have javascript set neon-animated-pages height to the height of it's children.

Unfortunately, neither of these solutions aren't pretty but they work to some degree.

[cdata]

@PaulHMason @ajtam gave a pretty good explanation of the problem. Closing for now.

[rodrigogoncalves]

Is there any chance this issue gets revisited for future releases? Wouldn't it be better if neon-animated-pages was part of the normal css flow, so layouts that need this flow wouldn't break (such as having a footer below it)?

I am running into this problem now and was able to solve it for iron-pages by adding a rule that overwrites its children default position: absolute (as explained in PolymerElements/iron-pages#31 where there's a jsbin demonstrating it). As @ajtam explained, this solution does not work for neon-animated-pages because transitions get screwed (see http://jsbin.com/xiwejixedo/edit?html,output).

This seems to be an important issue, since it's not a remote use case that gets problematic.

Thank you

[rodolfobc]

@rodrigogoncalves by default there's an iron-selected class that is added to the currently selected element.

In order to fix your issue you just have to create a css rule for that element that sets it as position: static.

For example:

neon-animated-pages .iron-selected {
position: static;
}

This solution will allow for the transitions to work properly.

The neon-animated-pages element also has a property called selectedClass, with which you can set the name of the class you wish to use for the selected elements (in case you don't want to use the default one, iron-selected).

[rodrigogoncalves]

@rodolfobc, although your solution pushes the page height to accommodate both neon-animation and content after it in the page flow, it fails to do so elegantly. It actually achieves the same effect that I had already achieved in my issue, which is a sloppy transition between pages, defeating the purpose of the element.

[safizn]

This has to have a solution ! Maybe apply the animation on an absolute positioned duplicate, and when the animation ends the child with position relative is displayed while the duplicate is hidden..
Please try fixing it

[safizn]

I'm not familiar with the animations, but after trying out:

neon-animated-pages .iron-selected {
position: static;
}

It seems to work fine, without "jumping" animations.
Can you make position: static; as the default rather than absolute ?

[tfoltynski]

For me the perfect solution was
neon-animated-pages .iron-selected:not(.neon-animating) { position: relative; }

[hyyan]

@tfoltynski solution works perfectly so far

[andystevensname]

I'm using the slide animations and so this might not work with others. I applied a CSS height transition to neon-animated-pages to mitigate the 'snapping height' behavior. (I did not set animate-initial-selection on neon-animated-pages):

neon-animated-pages {
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transition: height .5s;
    transition: height: .5s;
}

neon-animatable:not(.neon-animating) {
    display: block;
    position: relative;
    overflow: auto;
}

I then set a listener for iron-resize. I use a method to move to the next selected item, but the main part is really setting a height on neon-animated-pages before the first transition takes place.

listeners: [ 'iron-resize': '_resize' ],
next: function() {
    // selectedAnimatable and selected are provided by neon-animated-pages' IronSelectedBehavior
    this.$.neonPages.style.height = this.selectedAnimatable.offsetHeight + 'px';
    this.selected += 1;
},
_resize: function() {
    // if statement probably not necessary
    if (this.selectedAnimatable.offsetHeight != 0) {
        this.$.neonPages.style.height = this.selectedAnimatable.offsetHeight + 'px';
    }
}

This causes neon-animated-pages to transition in height after the animation has completed.

To transition while the animation is happening, I had to copy neon-animated-pages into a new component and remove the following css from :host > ::content > *:

top: 0;
right: 0;
bottom: 0;
left: 0;

I removed the relative positioning because if not all neon-animatable elements after the first would inherit the initial element's height. I also added width: 100% to neon-animatable to restore the width. This allows me to instead listen for the iron-select event with the same _resize method outlined above.

It would be nice to simply provide a mixin on :host > ::content > *, though.

[cfed]

I noticed the content jump is due to the padding on contentContainer inside of app-header-layout being implemented when the neon-pages animation finishes. My fix (slightly hacky) is to simply set padding-top equal to the height of app-header on the content. When the animation finishes simply set the padding back to zero;

You can listen to onNeonAnimationFinish like so

<neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish">

[daniele-orlando]

For me the problem was that the neon-animated-pages was located deep inside a flex container.
(Flex was used to fill the vertical free space).
Flex was definitely breaking the neon-animated-pages mechanism. I simply replaced flex with any CSS trick to fill the parent free space and now neon-animated-pages behaves as expected.

[hyyan]

For me the solution was

neon-animated-pages {
   position: static;
}