vaadin-grid not visible within a paper-header-panel

Question

I am trying to display a table data using vaadin-grid, embedded within a paper-header-panel element. The data is supposed to come from a Rest call. The Rest client used is and I am binding the last-response attribute with the 'items' attribute of the vaadin-grid. When I am inspecting the HTML using firebug, I am able to see the table is properly getting created, but in the frontend nothing is getting visible.

Below is my custom element: 'aws-api-gateway-call'

<template>
    <iron-ajax
        auto
        url="{{url}}"
        handle-as="json"
        last-response="{{handleResponse}}">
     </iron-ajax>

    <vaadin-grid items="{{handleResponse}}" selection-mode="multi">
        <table>
          <colgroup>
              <col name="fileName">
              <col name="titleName">
              <col name="artist">
              <col name="albumName">
              <col name="action">
          </colgroup>
          <thead>
            <tr>
              <th style="z-index: 10">MP3 File Name</th>
              <th>Title Name</th>
              <th>Artist Name</th>
              <th>Album Name</th>
              <th>Action</th>
            </tr>
            </thead>
        </table>
      </vaadin-grid>

</template>

<script>
    Polymer({
          is: "aws-api-gateway-call",

          properties : {
              hostname:{
                  value: 'test',
                  notify: true
              },
              stage:{
                  value: 'test',
                  notify: true
              },
              method:{
                  value: 'test',
                  notify: true
              },
              url:{
                  computed: 'computeUrl(hostname, stage, method)'
              }
          },              
          computeUrl: function(hostname, stage, method){
              console.log('URL to call-->' + [hostname, stage, method].join('/'))
              return [hostname, stage, method].join('/')
          }
        });
    </script>

And, here is my :

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>An Web-app to customize MP3 songs' metadata</title>
<link rel="shortcut icon" href="img/vector-black-ipod-10170961.jpg" />

    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <script type="text/javascript" src="bower_components/prefixfree/prefixfree.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
    <link rel="import" href="elements/api_calls.html">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="fullbleed layout vertical">

        <paper-header-panel class="flex">
            <div class="paper-header ipodHeaderPanel">My Ipod Customizer Application</div>
            <div class="content">

                <aws-api-gateway-call 
                    hostname="https://<acct-id>.execute-api.us-west-2.amazonaws.com" 
                    stage="mp3file" 
                    method="MP3MetadataReadMicroService">                           
                </aws-api-gateway-call>

            </div>
        </paper-header-panel>


</body>
</html>

Can you please help me understand the issue? And how to fix it?

So does the error only occur when aws-api-gateway-call is placed inside a paper-header-panel? — Sauli Tähkäpää, May 01 '16 at 06:35

JavierJ · Answer 1 · 2016-09-23T03:53:32.040

I had the same problem with paper-scroll-header-panel and vaadin-grid. I found two causes/solutions for this:

A quick inspect revealed the page-scroll-header-panel had a height of 0px. Making sure that the pager-scroll-header-panel height was 100% fixed it:
```
.max-height {
    height: 100%;
}

<paper-scroll-header-panel fixed class="max-height">
</paper-scroll-header-panel>
```
The paper-scroll-header-panel will create a mainContainer div and height: with position:'absolute' to place it's contents (which vaadin-grid might not like). If the height is not your problem then try to override the position of the mainContainer to 'relative' to diagnose:
```
#mainContainer.paper-scroll-header-panel {
    position: relative !important;
}
```

Disclaimer: Try to stay away from the !important clause, it usually causes huge negative impact on the style sheet’s maintainability. Inspect the mainContainer closely first since height:0 is usually the cause for this kind of things.

Hope this helps!

vaadin-grid not visible within a paper-header-panel

1 Answers1