1

I have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it

http://jsbin.com/qopocej/edit?html,output

If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.

I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.

The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin

http://jsbin.com/vecoxuh/edit?html,output

Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby

I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't

akc42
  • 4,893
  • 5
  • 41
  • 60
  • 1
    See the 1st point on this answer http://stackoverflow.com/a/7814370/4627632 – Heinrich Henning Oct 13 '16 at 14:02
  • @HeinrichHenning unfortunately in the question your reference the example seems to have disappeared. I understand the limitations of stacking context - but what is it that has changed with my refactoring of elements – akc42 Oct 13 '16 at 14:20

1 Answers1

1

The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.

styke
  • 2,116
  • 2
  • 23
  • 51
  • Can you be more specific. In the jsbin I gave, your can see that the Polymer `paper-dialog` with id="results" has been given a z-index of 102, and the `paper-dialog` in `my-sub-element` has a z-index of 105 – akc42 Oct 13 '16 at 14:22
  • Open a new dropdown and note the parent `` of that dropdown. Then find the parent of that ``, which is an element with the `.item` class name. Try setting a `z-index` of 1 to that element only, and you will see that the dropdown will appear over the other cards. – styke Oct 14 '16 at 11:13
  • I've credited you with the answer as it works. However, I have now taken a different approach and created two co-operating elements so that the dialog can naturally be placed in the correct place. Means I don't need to replicate the dialog nodes over and over. – akc42 Oct 14 '16 at 11:49