Add warning about needing explicit height

googlearchive · Jul 29, 2014 · 5073a82 · 5073a82
1 parent cc779ba
commit 5073a82
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/core-scroll-header-panel.html b/core-scroll-header-panel.html
@@ -14,6 +14,28 @@
 header scrolls back into view.  This saves screen space and allows users to
 access important controls by easily moving them back to the view.
 
+__Important:__ The `core-scroll-header-panel` will not display if its parent does not have a height.
+
+Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-scroll-header-panel` fill the screen
+
+    <body fullbleed layout vertical>
+      <core-scroll-header-panel flex>
+        <core-toolbar>
+          <div>Hello World!</div>
+        </core-toolbar>
+      </core-scroll-header-panel>
+    </body>
+
+or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scroll-header-panel` a height of 100%:
+
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    core-scroll-header-panel {
+      height: 100%;
+    }
+
 `core-scroll-header-panel` works well with `core-toolbar` but can use any element 
 that represents a header by adding a `core-header` class to it.  Use the attribute 
 or class `content` to delineate the content section.