2015-10-28 6 views
-1

Я использую раскрывающееся меню в нескольких местах в полимерном приложении. Он отлично работает в верхнем файле (index.php). Но почему-то это не работает во всех пользовательских элементах. Я должен делать что-то не так, потому что я не могу найти кого-либо еще в Интернете, жалующегося на эту проблему. Может ли кто-нибудь взглянуть на этот элемент и сказать, правильно ли это?Выпадающие списки Polymer 1.0, не отображающиеся в пользовательских элементах

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> 
<link rel="import" href="../../bower_components/iron-dropdown/iron-dropdown.html"> 
<link rel="import" href="../../bower_components/iron-icons/social-icons.html"> 
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html"> 

<link rel="import" href="../../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../../bower_components/paper-input/paper-input.html"> 
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../../bower_components/paper-styles/paper-styles-classes.html"> 

<link rel="import" href="../users-data/users-data.html"> 

<link rel="import" href="../../styles/shared-styles.html"> 

<dom-module id="account-user-add"> 
<template> 
    <style include="shared-styles"> 
     :host { 
      display: block; 
     } 
     *, ::after, ::before { 
      box-sizing: border-box; 
     } 
    </style> 

    <users-data users="{{users}}"></users-data> 

    <paper-card> 
     <div class="card-content"> 
      <!-- Contact photo area --> 

      <div class="row padded"> 
       <div class="col s4 m3 l2"> 
        <img class="circle responsive-img" src="[[user.avatar]]"> 
       </div> 
       <div class="col s8 m9 l10 padded"> 
        <h3> 
         <span>[[user.firstName]]</span> 
         <span>[[user.lastName]]</span> 
        </h3> 
        <div class="layout horizontal"> 
         <span>[[user.group]]</span> &nbsp;&nbsp;·&nbsp;&nbsp; <span>Active</span> 
        </div> 
       </div> 
      </div> 



      <!-- Contact form --> 
      <div id="contactForm"> 


       <!-- Group --> 
       <div class="formRow layout horizontal"> 
        <paper-dropdown-menu class="flex" label="Permission level"> 
         <paper-menu attr-for-selected="value" selected="{{user.group}}" class="dropdown-content"> 
          <paper-item value="Admin">Admin</paper-item> 
          <paper-item value="User">User</paper-item> 
         </paper-menu> 
        </paper-dropdown-menu> 
       </div> 

       <!-- Name --> 
       <div class="formRow layout horizontal"> 
        <paper-input value="{{user.firstName}}" class="item item-input flex" label="First name"></paper-input> 
        <paper-input value="{{user.lastName}}" class="item item-input flex" label="Last name"></paper-input> 
       </div> 

       <!-- Avatar --> 
       <div class="formRow layout horizontal"> 
        <paper-input value="{{user.avatar}}" class="item item-input flex" label="Avatar"></paper-input> 
       </div> 

       <!-- Phone --> 
       <div class="formRow layout horizontal"> 
        <paper-input value="{{user.telephone}}" class="item item-input flex" label="Phone"></paper-input> 
       </div> 

       <!-- Email --> 
       <div class="formRow layout horizontal"> 
        <paper-input value="{{user.email}}" class="item item-input flex" label="Email"></paper-input> 
       </div> 

       <!-- Address --> 
       <div class="formRow layout horizontal"> 
        <paper-input value="{{user.address}}" class="item item-input flex" label="Address"></paper-input> 
       </div> 

       <!-- Save --> 
       <div class="formRow buttons"> 
        <paper-button on-tap="_saveUser" raised><iron-icon icon="save"></iron-icon> Save</paper-button> 
       </div> 

      </div> 
     </div> 

    </paper-card> 
</template> 
<script> 
    (function() { 
     //'use strict'; 

     Polymer({ 
      is: 'account-user-add', 

      properties: { 
       users: { 
        type: Array 
       }, 
       user: { 
        value: {}, 
        type: Object 
       } 
      }, 
      _saveUser: function (event) { 
       this.push('users', this.user); 
       this.user = {}; 
       page('/account-users'); 
      } 
     }); 
    })(); 
</script> 
</dom-module> 
+0

Помогло бы мне, если бы я добавил файл bower здесь, чтобы вы могли реплицировать среду. – Edward

ответ

0

Это похоже на работу, когда вы отделили бумажную выпадающий-меню в простом файле:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/paper-card/paper-card.html"> 
    <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
    <link rel="import" href="bower_components/paper-menu/paper-menu.html"> 
    <link rel="import" href="bower_components/paper-item/paper-item.html"> 
</head> 
<body> 
    <dom-module id="account-user-add"> 
     <template> 
      <paper-card> 
       <div class="formRow layout horizontal"> 
        <paper-dropdown-menu class="flex" label="Permission level"> 
         <paper-menu attr-for-selected="value" class="dropdown-content"> 
          <paper-item value="Admin">Admin</paper-item> 
          <paper-item value="User">User</paper-item> 
         </paper-menu> 
        </paper-dropdown-menu> 
       </div> 
      </paper-card> 
     </template> 
     <script> 
      Polymer({ 
       is: "account-user-add" 
      }) 
     </script> 
    </dom-module> 
    <account-user-add> 

    </account-user-add> 
</body> 
</html> 
+0

Точно, но я не смог понять, почему он не будет работать, когда внутри элемента. Если я использую элемент Inspect, я даже вижу, что область раскрывающегося списка загорается на странице. Но он либо пуст, либо под другими слоями. Поэтому я попытался изменить его z-index, но это тоже не исправило. – Edward

+0

Возможно, вам следует предоставить живой пример. – Supersharp

0

Это странно. Кажется, работает в This example

Я ничего не сделал, но разместил ваш код и добавил элемент-участник, который работает каждый импорт. Может быть, вы могли бы проверить их?

+0

Привет, Андреас. Когда выпадающий список используется в основном файле, он работает так, как я писал. Проблема заключается в том, что он используется в элементе, который импортируется в основной файл. – Edward