CODEWITHSUNDEEP
polymerweb-component
Ishan Hettiarachchi
Ishan Hettiarachchi

Reputation: 1704

Polymer core-scroll-header-panel styles and import

I am very new to Polymer and following is my first try at it. I wanted to add a core-scroll-header-panel (which is cool!) and it works rather OK - code was mostly copied from samples. But I cannot access the shadow dom of the core-scroll-header-panel to set the styles of headerBg and condensedHeaderBg. Developer tools doesn't show the shadow DOM for core-scroll-header-panel (I can see the shadow DOM for other elements) 

<!doctype html>
   <html>
     <head>
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/core-icon-button/core-icon-button.html">
<link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html">

<link rel="import" href="components/paper-item/paper-item.html">

<script src="components/platform/platform.js"></script>
<link rel="import" href="components/font-roboto/roboto.html">

  <style>

/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
  background-image: url(images/bg9.jpg);
}

/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
  background-color: #f4b400;
}

core-toolbar {
  color: #f1f1f1;
  fill: #f1f1f1;
  background-color: transparent;
}

.title {
  -webkit-transform-origin: 0;
  transform-origin: 0;
  font-size: 40px;
}     

.content  {
  padding: 10px 30px;
}       
  </style>
</head>
<body unresolved>
      <core-scroll-header-panel condenses main>
          <core-toolbar class="tall">            
            <core-icon-button icon="arrow-back"></core-icon-button>
            <div flex></div>
            <core-icon-button icon="search"></core-icon-button>
            <core-icon-button icon="more-vert"></core-icon-button>
            <div class="bottom indent title">Title</div>              
          </core-toolbar>            
          <div class="content">  
          <p>  
              Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
           <p>
              Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.                 
          </div>
        </core-scroll-header-panel>        
</body>
</html>

Interestingly when I import core-scroll-header-panel.html (as above) the whole thing breaks and nothing is shown. But the shadow DOM and everything is in place.

When I comment it the page is visible with no background styles as shadow DOM is not there.

any clue why?

I added a JSBin

regards, Ish

PS: There is a overflow:hidden CSS element set in the core-scroll-header-panel. I can make things visible when force it to visible.

Upvotes: 3

Views: 2374

Answers (2)

ScampMichael
ScampMichael

Reputation: 3728

http://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel

Important: The core-header-panel will not display if its parent does not have a height.

Using layout attributes, you can easily make the core-header-panel fill the screen

<body fullbleed layout vertical>
  <core-header-panel flex>
    <core-toolbar>
      <div>Hello World!</div>
    </core-toolbar>
  </core-header-panel>
</body>

or, if you would prefer to do it in CSS, just give html, body, and core-header-panel a height of 100%:

html, body {
  height: 100%;
  margin: 0;
}
core-header-panel {
  height: 100%;
}

Upvotes: 2

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

Try to add

core-scroll-header-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

to make the scroll header panel fill the whole screen.

Upvotes: 1

Related Questions