CODEWITHSUNDEEP
drop-down-menupolymerpolymer-1.0iron-list
Vims
Vims

Reputation: 179

Polymer paper-dropdown menu does not overlay iron-list

My issue is similar to the one here: paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items, but no adequate solution is proposed there.

The problem is that I have a <paper-dropdown-menu>, which opens up correctly inside the <iron-list> item it is in, but goes underneath the following <iron-list> items: screenshot

I have a simple <paper-dropdown-menu> like this:

<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
  <paper-listbox class="dropdown-content" selected="1">
    <paper-item>Spanish</paper-item>
    <paper-item>English</paper-item>
    <paper-item>French</paper-item>
    <paper-item>Sinhala</paper-item>
  </paper-listbox>
</paper-dropdown-menu-light>

which is inserted into another element with an <iron-list> (which loads a JSON file with <iron-ajax>):

<iron-list id="list" items="[[bookList.books]]" as="item">
  <template>
    <div>
      <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
        <div class="avatar">[[item.id]]</div>
        <div class="pad">
          <div class="primary">[[item.titleen]]</div>
          <div class="shortText">[[item.slug]]</div>
          <div class="longText">[[item.blurb]]</div>
            <div class="languagedrop">
              <language-drop></language-drop>
            </div>
        </div>

      </div>
    </div>
  </template>
</iron-list>

I tried setting the z-index for each <iron-list> item to 1, but that did not work. I tried working with <iron-overlay>, but I did not manage to get that done. I'm very new to Polymer, so if anybody has a solution or workaround that would be great.

Upvotes: 1

Views: 630

Answers (1)

Kyle
Kyle

Reputation: 179

That's because iron-list is using transform: translate3d for each list item. The workaround that I have found is working is to add z-indexto the current list item (<div class="item"></div>) on which you have the dropdown expanded, or to all items from top to bottom in descending order, programatically.

Upvotes: 1

Related Questions