Skip to content
This repository has been archived by the owner on Dec 19, 2017. It is now read-only.

core_header_panel in nested polymer element has height 0 in compiled javascript #209

Open
kzhdev opened this issue Apr 21, 2015 · 2 comments

Comments

@kzhdev
Copy link

kzhdev commented Apr 21, 2015

Please try following project
https://drive.google.com/file/d/0B3rLcM6YFZ4VY0w5MW9BYXhvZkE/view?usp=sharing

Then nav-panel includes a core-header-panel. It works fine when running in Dartium. When runs as Javascript, the core-header-panel does not shown because the height is 0.

If changing the core-header-panel to two nested div (commented out in nav-panel), the nav-panel is shown, but If I have long nav list, the nav-panel does not scroll because its height is larger than the screen height.

@Andersmholmgren
Copy link

I think I am hitting something similar with core-scroll-header-panel on gitbacklog.appspot.com.

I noticed that the it's #mainContainer div has an element style applied of position:relative

This seems to cause the height of my contents to every now and then (~30-40% of the time) to have height 0.

I too have only observed this in JS and strangely only when running via pub build via the gcloud command. I'm guessing there is some timing thing that is introducing.

My workaround is

  #scroll-panel::shadow div#mainContainer {
    position: absolute !important;
  }

where scroll-panel is the id on my core-scroll-header-panel

This seems to be working

BTW I never noticed this till I recently upgraded polymer and core-elements

@kzhdev
Copy link
Author

kzhdev commented May 1, 2015

@Andersmholmgren

Your workaround does make the panel show up, but the panel does not scrolling because the height is very large.

It also covered the toolbar. you need to set the position of #outerContainer to either inheritance or staitc.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

2 participants