Question

我有一个纸影目标（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>

当文件运行时，你会看到下拉垂直滚动条没有完全滚动以允许查看所有元素 - 只能看到元素'Eye'和以上 - 下面的所有其他元素都被剪裁。

第一印象可能是增加“卡片”的高度，但这会占用太多空间而无法实现我的目的。

感谢您的帮助 enter image description here

Answer 1

似乎是最近修复的此问题https://github.com/Polymer/paper-dropdown-menu/issues/26。

在下一个版本中，您可以在此用例的纸张下拉列表中使用分层属性。

当放入具有div目标的纸阴影时剪切纸张下拉菜单

1 个答案: