2 Answers2

1

Well, bad news is that it's iron-list issue (namely iron-list using z-translation).

Good news is that there is kind of a workaround for that... I had the same problem and what I ended up with was a behavior (but you can make put this in your component) that has something like:

tableListOverflowVisible: function (...tables) {
        tables.forEach((id) => {
          if (typeof id !== 'string') {
            return;
          }

          const table = this.$[id];

          if (!table) {
            return;
          }

          Polymer
            .dom(table)
            .node.querySelector('iron-list')
            .setAttribute('style', 'overflow: visible !important;');
        });
      },

Just pass your table id there and that should do the job...

Kyle
  • 184
  • 2
  • 13
0

If your z-index is properly set, check the background-color, it may be set to transparent.

KVNA
  • 847
  • 1
  • 11
  • 24
  • Only the issue happen when the popover position at bottom. – Anoop Apr 30 '17 at 18:15
  • Are you setting ```z-index``` with the ```:host``` selector? – KVNA Apr 30 '17 at 18:17
  • z-index is already there. But its not taking. Table column property over riding that. Some flex property increment the value. – Anoop Apr 30 '17 at 18:22
  • Yes. Table row and column are flex property. I think that flex property overwriting some properties. – Anoop Apr 30 '17 at 18:41
  • Sorry, not much else I can do to try to help without you providing some code along these guidelines: https://stackoverflow.com/help/mcve – KVNA Apr 30 '17 at 18:47