Question about size of core-animated-pages

142 views

Skip to first unread message

Kun Li

unread,

Oct 1, 2014, 3:35:29 AM10/1/14

to polym...@googlegroups.com

Hey guys:

Polymer Newbie here.

I was trying to achieve similar effect of grid demo here:

http://www.polymer-project.org/components/core-animated-pages/demos/grid.html

In this demo, core-animated-pages is wrapped inside a body tag, like this:

main.html:

<core-toolbar> ... </core-toolbar>

<core-animated-pages>

...

</core-animated-pages>

</body>

In this way, the height of core-animated-pages adapts to the content it contains. For example, say each div is 50px high, then if I have 10 divs, the core-animated-pages will be 500px high, and if I have 20 divs, the core-animated-pages will be 1000px high.

However, if I try to wrap the core-animated-pages into a polymer element, then it stops adapting its height to contained divs. For example, say now the layout looks like this:

main.html:

</body>

app.html:

<polymer-element name="app">

<core-toolbar> ... </core-toolbar>

<core-animated-pages>

...

</core-animated-pages>

</polymer-element>

Then the height of core-animated-pages will always be 0 showing in javascript console. And all the divs will be squeezed into one single page without scroll bar, and sitting on top of previous div. The attached image shows what it looks like:

If I tried to manually set the height of the core-animated-pages, it will show what I want to see(a bunch of separated cards). The problem is though every time the number of divs could be different, so I can not simply specify one value to it.

One workaround I can think of is that to make the height attribute of core-animated-pages to be binded value, and change it accordingly in Javascript once I know how many divs there will be. That's fine. But I want to understand why the behavior of height of core-animated-pages is not consistent when it's under body directly versus getting wrapped into element. Surely it will also be much nicer if it takes care of height by itself. Since supposedly when user tap on any of the div, core-animated-pages will show all different kinds of content, which are of different height as well.