paper-header-panel gap in layout

Question

paper-header-panel gap in layout

Closed this issue 9 years ago · 21 comments

Please see original issue with screen shots and info

Answer 1 · 2015-07-29T13:23:42.000Z

It works without the import because 'paper-header-panel' is no longer used now, when working with 'paper-header-panel' place the content under the 'paper-toolbar'.

<paper-header-panel>
    <paper-toolbar>Toolbar</paper-toolbar>
    <div>Content</div>
</paper-header-panel>

Answer 2 · 2015-07-29T13:39:33.000Z

Yes...there is a issue with my version of <paper-header-panel> where it creates the gap that I have in the other photos. This is the context I mean this issue to be in. Thanks, I corrected the title.

Answer 3 · 2015-07-29T14:11:46.000Z

So this doesn't work for you ? http://jsbin.com/yuyigu/edit?html,css,output

Answer 4 · 2015-07-29T15:10:32.000Z

No, locally it does not. Only in JSBIN does it work(I am not sure what version of paper-header-panel they are using in that library attached). Locally, there is a big gap which makes paper-header-panel around 603px in height. I tried to capture it with these 2 screen shots, to show where the image follows after thepaper-header-panel gap.

I am using paper-header-panel 1.0.2

Answer 5 · 2015-07-29T16:21:05.000Z

It does work for me with http://jsbin.com/yuyigu/edit?html,css,output, in jsbin & locally, if you want I'll create a repo with the working code?

'paper-header-panel' 1.0.3

Answer 6 · 2015-07-29T17:01:58.000Z

it seems like you might have forgotten to import paper-toolbar. You should have something like:

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

Answer 7 · 2015-07-29T18:14:11.000Z

No, I have it imported. <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">.

Answer 8 · 2015-07-29T18:15:50.000Z

Can you copy and paste the code?

Answer 9 · 2015-07-29T18:26:54.000Z

It's the same code that is in http://jsbin.com/zuvami/edit?html,css,output. The only difference is the jsbin has:

  <base href="http://milestech.net/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

  <link href="paper-tabs/paper-tabs.html" rel="import">
  <link href="paper-toolbar/paper-toolbar.html" rel="import">
  <link href="paper-header-panel/paper-header-panel.html" rel="import">

and my local has:

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="bower_components/paper-material/paper-material.html">
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="custom_elements/video-player.html">
  <link rel="stylesheet" href="css/main.css">

When I get home tonight from work I can make a even more bare minimum example and paste the code and a new jsbin.

Answer 10 · 2015-07-29T22:52:10.000Z

Here is a very bare min. example.... it works correctly on jsbin BUT not locally.

<!doctype html>
<html>

<head>


  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="bower_components/paper-material/paper-material.html">
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="custom_elements/video-player.html">
  <link rel="stylesheet" href="css/main.css">
  <style is="custom-style">
  </style>
</head>
<body>
    <paper-header-panel>
      <paper-toolbar>
      </paper-toolbar>
    </paper-header-panel>
    <div class="flex relative" style="width: 100%; height: 100%">
      <div id="video-photo-container" class="fit">
      </div>
    </div>
</body>
  <script src="http://104.130.126.121:35729/livereload.js?snipver=1"></script>
</html>

html,body {
  margin: 0;
  background-color: #E5E5E5;
  font-family: 'RobotoDraft', sans-serif;
  height: 100%;
}

#video-photo-container {
  background: url(http://www.waynestiles.com/wp-content/uploads/2012/05/King-David-statue-on-Mount-.jpg) no-repeat 50% 50%;
  background-size: cover;
}

Please notice the blue paper header on top, the large gap in the middle, and the image below the gap.

Can this label be changed to bug, please? It looks like a bug to me.

It's a blocker for what I am doing...if anyone might know of a work around please.

Answer 11 · 2015-07-29T23:51:21.000Z

There is a big difference between webcomponents-lite (jsbin) and webcomponents (local code); specifically the latter includes the full Shadow DOM polyfill, which you shouldn't be using in general. Are you requiring the full polyfill locally on purpose?

Answer 12 · 2015-07-29T23:57:38.000Z

Thanks...didn't know that. I switched to webcomponents-lite.js but the issue still is existing.

<!doctype html>
<html>

<head>


  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="bower_components/paper-material/paper-material.html">
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="custom_elements/video-player.html">
  <link rel="stylesheet" href="css/main.css">
  <style is="custom-style">
  </style>
</head>
<body>
    <paper-header-panel>
      <paper-toolbar>
      </paper-toolbar>
    </paper-header-panel>
    <div class="flex relative" style="width: 100%; height: 100%">
      <div id="video-photo-container" class="fit">
      </div>
    </div>
</body>
  <script src="http://104.130.126.121:35729/livereload.js?snipver=1"></script>
</html>

Answer 13 · 2015-07-30T00:01:22.000Z

We won't be able to explain the problem without a reproduction. There are too many things that could be going wrong in your local setup that we can't verify.

One suggestion is that you upload your project to GitHub pages where we can examine it.

Answer 14 · 2015-07-30T00:38:55.000Z

Sure, please see https://github.com/dman777/paper-header-panel-issue.git . Thank you for taking the time to investigate. Please note the bower_components is actually in app/bower_components.

Answer 15 · 2015-07-31T00:37:54.000Z

Hi, just checking back....was anyone else able to reproduce this issue? I suspect it may be <div id="mainContainer" class="flex style-scope paper-header-panel"></div> causing the issue.

Answer 16 · 2015-07-31T02:21:31.000Z

This issue does not exist in version 0.9.2.

Please mark this as a bug

Answer 17 · 2015-07-31T05:50:06.000Z

A few things @dman777. Try doing the following for all bower_components:
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
Also, you need to place all content inside the <paper-header-panel> tags. I've been using <paper-header-panel> since v0.5 and it has always worked this way...

<!doctype html>
<html>

<head>

  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../bower_components/paper-material/paper-material.html">
  <link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="custom_elements/video-player.html">
  <link rel="stylesheet" href="css/main.css">
  <style is="custom-style">
  </style>
</head>
<body class="fullbleed vertical layout">
    <paper-header-panel>
      <paper-toolbar>
      </paper-toolbar>
      <div class="fit">
        <div id="video-photo-container"> </div>
      </div>
    </paper-header-panel>

</body>
  <script src="http://104.130.126.121:35729/livereload.js?snipver=1"></script>
</html>

Also, the class="fit" should be in the parent of your video container. Then you can style your video container like this:

#video-photo-container {
  width: 100%;
  height: 100%; /*or 100vh, whichever you prefer */
  margin: 0;
}

See the documentation here for more information: https://elements.polymer-project.org/elements/paper-header-panel.

Hope this helps!

Answer 18 · 2015-07-31T17:42:37.000Z

Since 0.9.3 the height is set to 100%,

See 3e8e2fa

Answer 19 · 2015-08-07T18:12:10.000Z

@dman777 here's an example: http://output.jsbin.com/xowuco.

You can use --paper-header-panel-standard-container to style the container.
You need to place the content inside paper-header-panel

<style is="custom-style">
  html,body {
    margin: 0;
    background-color: #E5E5E5;
    font-family: 'RobotoDraft', sans-serif;
    height: 100%;
  }

  paper-header-panel {
    --paper-header-panel-standard-container: {
        background: url(http://www.waynestiles.com/wp-content/uploads/2012/05/King-David-statue-on-Mount-.jpg) no-repeat 50% 50%;
        background-size: cover;
    };
  }
</style>

Answer 20 · 2015-08-07T18:43:58.000Z

This doesn't seem correct ....paper-header-panel is what goes on top. It shouldn't contain the brackground photo...it should be a sibling in the document flow. A good example is Google I/O 2015 photo.

Answer 21 · 2015-08-10T18:55:42.000Z

@dman777 the I/O website is using a header, but not a paper-header-panel. core-header-panel from 0.5 had this behavior as well https://www.polymer-project.org/0.5/components/core-header-panel/demo.html