剪切纸下拉菜单时放在纸阴影与div目标

我有一个纸阴影目标（div），当目标的高度超过时剪辑纸下拉菜单的srollbar。我预计下拉菜单中的所有项目都会滚动，但事实并非如此。剪切纸下拉菜单时放在纸阴影与div目标

...的html的代码

  <link href = '../../../../packages/polymer/polymer.html' rel = 'import'> 

      <link href = '../../../../packages/paper_elements/paper_icon_button.html' rel = 'import' > 
      <link href = '../../../../packages/paper_elements/paper_dropdown_menu.html' rel = 'import' > 
      <link href = '../../../../packages/paper_elements/paper_item.html' rel = 'import' > 
      <link href = '../../../../packages/paper_elements/paper_shadow.html' rel = 'import'> 


      <polymer-element name = 'sss-form'> 

       <template>  
       <style> 
       .card 
       { 
       background: white; 
       /*width: relative; */ 
       /*height: 100%*/; 
       /*position: relative; */ 
       margin: 12px; 
       border-radius: 10px; 
       } 

       </style> 


        <div layout vertical 
        id = 'source-div' 
        class='card'> 
         <paper-shadow z = '2'></paper-shadow> 
         <h3 class = 'margin-l-10'>Source</h3> 
         <div><hr></div> 
         <template repeat = '{{ i in list }}'> 
         <div layout horizontal center-justified 
          id = 'choices'> 
          <paper-dropdown-menu 
           id = 'status' 
           class = 'margin-l-10' 
           halign = 'center' 
           label = 'Select' 
           valueattr = 'label' 
           on-core-select = '{{ onCoreSelectSource }}'> 
           <template repeat = '{{ key in sourceChoices.keys }}'> 
           <paper-item 
            id = '{{ key }}' 
            label = '{{ key }}'> 
           </paper-item> 
           </template> 
          </paper-dropdown-menu> 
          </div> 
         </template>  
        </div> 

       </template> 

       <script type = 'application/dart' src = 'sss_form.dart'></script> 
      </polymer-element>

... .dart文件

import 'package:polymer/polymer.dart'; 

    import 'dart:html'; 
    import 'dart:js' show JsObject; 

    import 'package:paper_elements/paper_item.dart' show PaperItem; 


    @CustomTag('sss-form') 
    class SssForm extends PolymerElement 
    { 
    @observable 
    Map<String, dynamic> selections = toObservable({}); 

    @observable 
    Map<String, dynamic> sourceChoices = toObservable(
     { 
     'CSU': 'CSU', 
     'Bladder tap': 'Bladder tap', 
     'Bone': 'Bone', 
     'Ear': 'Ear', 
     'Eye': 'Eye', 
     'LP': 'LP', 
     'Nose': 'Nose', 
     'Peritoneal cavity': 'Peritoneal cavity', 
     'MSU': 'MSU', 
     'Mouth': 'Mouth', 
     'Thorax': 'Thorax', 
     'Ulcer': 'Ulcer', 
     'Venous': 'Venous' 
     }); 

    @observable String source = ''; 
    @observable int rows = 2; 
    @observable List list; 

    SssForm.created() : super.created(); 

    void onCoreSelectSource(Event e, var detail) 
    { 
     var detail = new JsObject.fromBrowserObject(e)['detail']; 

     if(detail[ 'isSelected' ]) 
     { 
     source = (detail[ 'item' ] as PaperItem).label; 
     print('source | $source'); 
     } 
    } 


    void addSpecimenRow() 
    { 
     rows++; 
     print(rows); 
     print(list.length); 
    } 


    @override 
    void attached() 
    { 
     super.attached(); 
     list = toObservable(new List(rows)); 
    } 
    }

以上.html文件，然后在.html文件托管下面并运行

 <!DOCTYPE html> 

     <link rel='import' href='../../../packages/polymer/polymer.html'> 

     <link rel='import' href='../../../packages/paper_elements/paper_input.html'> 

     <link rel='import' href='../../../packages/paper_elements/paper_shadow.html'> 
     <link rel='import' href='../../../packages/paper_elements/paper_checkbox.html'> 
     <link rel='import' href='../../../packages/core_elements/core_icons.html'> 
     <link rel='import' href='../../../packages/paper_elements/paper_tabs.html'> 
     <link rel = 'import' href = '../../../packages/core_elements/core_collapse.html' > 

     <link rel='import' href='../../../packages/epimss_shared/components/request/sss_form.html'> 


     <polymer-element name='dynamic-chk-box-form'> 

      <template> 
      <style> 
       paper-tabs[noink][nobar] paper-tab.core-selected { 
        color: #ffff8d; 
        } 

        paper-tabs.transparent-teal { 
         background-color: transparent; 
         color: #00bcd4; 
         box-shadow: none; 
        } 

        paper-tabs.transparent-teal::shadow #selectionBar { 
         background-color: cyan; /* #00bcd4; */ 
        } 

        #choices, paper-checkbox { 
          padding: 5px 10px 5px 0; 
         } 

         #fieldset { background-color: beige; } 

      </style> 
       <div> 
        <paper-tabs selected='home' valueattr='name' self-end> 
         <paper-tab 
          id = 'home' 
          name='home' on-click = '{{ onClickHome }}'> 
         <core-icon icon='home'></core-icon> 
         Electrolytes 
         </paper-tab> 

        </paper-tabs> 

        <core-collapse id = 'core-collapse'>   
          <sss-form 
          topic-data = 'shared| topic --> data'> 
          </sss-form> 
        </core-collapse> 
       </div> 
      </template> 

      <script type = 'application/dart' src = 'dynamic_chk_box_form.dart'></script> 
     </polymer-element>

当文件运行时，您会看到下拉垂直滚动条不会完全滚动以允许查看所有元素 - 仅查看元素“眼睛”和更高级别 - 查看下面所有其他元素。

第一印象可能是增加'卡'的高度，但这会占用太多的空间并打败我的目的。

感谢您的帮助 enter image description here

来源

2014-11-08 st_clair_clarke

似乎是这个问题https://github.com/Polymer/paper-dropdown-menu/issues/26这是最近固定。

在下一个版本中，您可以在paper-dropdown中使用此属性的分层属性。

来源

2014-11-08 11:02:50

感谢Gunter。你能否看看我在[1] [1]的回答中提出的最后一条评论[http://stackoverflow.com/questions/26769677/setting-a-bool-published-attribute-with-published](http://stackoverflow.com/问题/ 26769677 /设置-A-布尔出版的属性，与出版）。谢谢 – 2014-11-08 11:11:31

对不起，我错过了你的评论包含一个问题。 – 2014-11-08 11:16:16

剪切纸下拉菜单时放在纸阴影与div目标

回答

相关问题