vaadin-сетка не видна внутри панели заголовка

Я пытаюсь отобразить данные таблицы, используя сетку vaadin, встроенную в элемент панели панели заголовка. Предполагается, что данные поступают из вызова Rest. Используется клиент Rest, и я связываю атрибут last-response с атрибутом «items» сетки vaadin. Когда я проверяю HTML с помощью firebug, я вижу, что таблица правильно создается, но в интерфейсе ничего не становится видимым.vaadin-сетка не видна внутри панели заголовка

Ниже мой пользовательский элемент: 'АМС-апи-шлюз вызова'

<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>

И вот мой:

<!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>

Можете ли вы мне помочь понять проблему? И как это исправить?

источник

2016-04-26 Aritra Nayak

Так происходит ли ошибка только тогда, когда aws-api-gateway-call помещается внутри панели заголовка? –

Да, это правильно –

У меня была та же проблема с панелью-прокруткой для бумаги и сеткой ваадин. Я нашел две причины/решения для этого:

Быстрый осматривайте показал страницу прокрутки заголовка панели имели высоту 0px. Убедившись, что высота пейджера прокрутки заголовка панели была 100% зафиксировала его:
```
.max-height { 
    height: 100%; 
} 

<paper-scroll-header-panel fixed class="max-height"> 
</paper-scroll-header-panel> 
```
Бумага прокрутка заголовок панель создаст mainContainer DIV и высоту: с позицией: «абсолютный» на место это содержимое (которое может не понравиться vaadin-grid). Если высота не ваша проблема, то попробуйте переопределить положение mainContainer к «родственнику» для диагностики:
```
#mainContainer.paper-scroll-header-panel { 
    position: relative !important; 
} 
```

Предупреждения: Постарайтесь держаться подальше от важной оговорка, это обычно вызывает огромной! отрицательное влияние на ремонтопригодность таблицы стилей. Осмотрите mainContainer вплотную сначала с высоты: 0 обычно является причиной такого рода вещей.

Надеюсь, это поможет!

источник

2016-09-23 03:17:32 JavierJ

vaadin-сетка не видна внутри панели заголовка

ответ

Смежные вопросы