[+polymer-dev for public discussion] core-animated-pages fits its children to itself using absolute positioning. In this example, the core-animated-pages element has no height, causing the issues you noted. It's tricky to make core-animated-pages sized to its content, but you could work around it by giving it some height as you already discovered.
On Thu, Jul 24, 2014 at 11:25 AM, Mehmet Fidanboylu <[email protected]> wrote: > The simplest hack I could do for now is to explicitly set the height of > the outer div: > > <div class="core-header" id="search-panel-container"> > > #search-panel-container { > height: 64px; > } > > - Mehmet > > > > On Thu, Jul 24, 2014 at 11:08 AM, Mehmet Fidanboylu <[email protected]> > wrote: > >> Hi polymer folks, >> >> I have a use case where I would like to animate switching between a >> regular toolbar and a search toolbar while keeping the content the same and >> visible. I tried doing something like this: >> >> <core-header-panel main mode="standard" shadow="true"> >> <div class="core-header"> >> <core-animated-pages id="search-panel" transitions="cross-fade" >> selected=0> >> <section> >> <core-toolbar cross-fade> >> My regular toolbar >> </core-toolbar> >> </section> >> <section> >> <core-toolbar cross-fade> >> My search toolbar >> </core-toolbar> >> </section> >> </core-animated-pages> >> </div> >> <div class="content"> >> My content >> </div> >> </core-header-panel> >> >> This works great for animating the toolbars; but I lose two things which >> are probably related: >> - Toolbar section no longer shows a drop shadow >> - Toolbar section does not have height; the content div starts at top = 0 >> >> My guess is that core-animated-pages is not meant to be used this way so >> I wanted to ask how else I would achieve what I want. >> >> core-animation probably won't work for me as it seems very close to CSS >> animations and I am not sure how to do those w/o using position fixed to >> make sure both dom elements existing at the same time does not cause layout >> issues. (Come to think of it, may be that's why core-animated-pages does >> not work; it sets fixed position for the header which causes the content >> div to ignore the header altogether). >> >> Thanks for the input! >> >> - Mehmet >> >> > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHk1xZ%2BLXK%2BimSxVuVu_MsOJgw5r2j5a_k5r5BJ655Dqt4rRZA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
