Clipping of paper-dropdown-menu when placed in paper-shadow with div target

Question

I have a paper-shadow target (div) that clips the srollbar of the paper-dropdown-menu when the height of the target is exceeded. I expected all the items in dropdown to be scrolled but this is not the case.

...the .html code

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

  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 ));
    }
  }

The above .html file is then hosted in the .html file below and run

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

When the file is run, you will see that the dropdown vertical scrollbar does NOT completely scrolls to allow view of all the elements - only elements 'Eye' and above are seen - all others below are clipped.

The first impression might be to increase the height of the 'card', but this would take up too much space and defeat my purpose.

Thanks for the help

Answer 1

Seems to be this issue https://github.com/Polymer/paper-dropdown-menu/issues/26 which was fixed recently.

In the next release, you can use the layered property in paper-dropdown for this use case.