剪切紙下拉菜單時放在紙陰影與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目標

回答

相關問題