CODEWITHSUNDEEP
polymerweb-component
Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25267

"core-header-panel" doesnt seem to work out-of-the-box

I was trying some core polymer elements, and I have been having trouble using core-header-panel in my demo.

I think the toolbar is right, because I managed to do another demo where it was working with minimal CSS. But all the demo I found for core-header-panel seems to take most of the layout configuration outside the component (Which kinda seems like the point of the component). Did I misinterpret something here?

Upvotes: 2

Views: 1092

Answers (2)

Scott Miles
Scott Miles

Reputation: 11027

The best pattern today is to use the polymer layout attributes.

<body fullbleed vertical layout>
  <core-header-panel flex>

vertical layout makes the body a (vertical) flex-box, and the flex attribute on the core-header-panel will make it fill the available space. fullbleed attribute sets body to fit the viewport.

This is a better pattern in general than using fit because flex-boxes are more resilient. You could add a different header or footer to body, and the flex panel will adapt.

Also, using layout containers and flex children is a pattern you can continue to use in other places in the application.

Upvotes: 8

Wing
Wing

Reputation: 21

According to the polymer web site core-header-panel is always needs to have a height set on it explicitly. http://www.polymer-project.org/docs/elements/layout-elements.html

Try using the fit attribute (http://www.polymer-project.org/docs/polymer/layout-attrs.html):

<core-header-panel fit>
  ....
</core-header-panel>

Upvotes: 2

Related Questions