search

dart-archive / core-elements

Polymer core-* elements wrapped or ported for Dart
https://pub.dartlang.org/packages/core_elements
Apache License 2.0
33 stars 25 forks source link

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

Open kzhdev opened 9 years ago

kzhdev commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

@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.