CODEWITHSUNDEEP
polymerpolymer-1.0
Joel H.
Joel H.

Reputation: 2784

Only iron-icon is selectable in paper-item within paper-card

enter image description here

I'm having problems interacting with a selectable list of paper-item objects. The on-tap (or on-click) function is only firing when I click the iron-icon within the item, but the rest of the cell is unresponsive. I'm currently displaying the items within a paper-menu, but I've tried using iron-selector which yields the same behavior.

<paper-menu selected="{{selected}}">
    <paper-item on-tap="_onItemTap" role="menuitem">
        <iron-icon icon="cloud-done"></iron-icon>
        <paper-item-body two-line>
            <div>file_1.json</div>
            <div secondary class="second-item-line">Complete</div>
            </paper-item-body>
    </paper-item>
    (... other items)
</paper-menu>

The paper-menu is nested within a neon-animated-pages element and a paper-card element. I don't know if that's affecting its behavior at all.

Am I missing anything? Is there a way to make the entire paper-item clickable that I just haven't implemented? Or could other elements be interfering?

Update:

Upon further digging, I've found that my list of 'paper-item' elements works perfectly if I remove it from the context of the paper-card element. The moment I put the list inside a card, it masks the selectable area somehow (but the iron-icon is still exposed). Is there any way to expose the entire paper-item element to selection in this context? If not, I'll have to redesign my UI to not use paper-card.

Upvotes: 0

Views: 911

Answers (1)

Joel H.
Joel H.

Reputation: 2784

I figured it out. Silly bug, really. Because my list was not inside a div with class="card-content", the paper-item elements weren't showing on the top layer of the card, becoming unusable. Adding a div with that class around my content solved my issue. Here's how the code turned out:

<paper-card>
<div class="card-content">
    <iron-selector selected="{{selected}}">
        <paper-icon-item on-tap="_onItemTap">
            <iron-icon icon="cloud-done" item-icon></iron-icon>
            <paper-item-body two-line>
                <div>file_1.json</div>
                <div secondary>Complete</div>
            </paper-item-body>
        </paper-icon-item>
        <!-- other items -->
    </iron-selector>
</div>
</paper-card>

Upvotes: 1

Related Questions