absolute/fixed positioned elements inside row-detail

[kamil-maslowski]

There's an issue with absolute/fixed elements that are inside row-detail as they are overlapped by other list item elements.

It makes problems when e.g. implementing datepicker inside details row.

Please see attached

[web-padawan]

the reason is that iron-list uses transform property: PolymerElements/iron-list#242

[kamil-maslowski]

As I thought... but is there any legit way to fix that when using iron-data-table?

[web-padawan]

I used to fix it like this, but now I ended up with creating brainy-table which uses dom-repeat (and I'm going to implement pagination to deal wit big amounts of data).

[kamil-maslowski]

Yeah, found the z-index fix myself... but that works only "one way", from top to bottom, and if something will pop to top, earlier elements will overlap over it.

Other than that... how did you managed to set z-index on list items?

[web-padawan]

@kamil-maslowski here is the solution to calculate z-index. Paste this code in beforeRowBind:

var items = Polymer.dom(table.$$('#list')).querySelectorAll('div.item');
items.forEach(function (item, index) {
    item.style.zIndex = items.length - index;
});

[kamil-maslowski]

@web-padawan I did that kinda different to overcome the problem with previous rows overlapping elements:

_beforeRowBind: function(data, row) { row.parentNode.style.zIndex = data.expanded ? "1" : null; },

just fyi ;)

[web-padawan]

@kamil-maslowski please take into account that using ?dom=shadow (or enabling native shadow DOM in global Polymer settings) changes table structure. There is a trick with <content> element and node distribution :)

[anooprajan89]

@web-padawan I tried your code.

var items = Polymer.dom(table.$$('#list')).querySelectorAll('div.item');
items.forEach(function (item, index) {
item.style.zIndex = items.length - index;
});

But the issue coming opposite. In my issue, the calendar shows upward is fine. Downward is behind the column. After using your code, It's coming opposite(downword is fine, but upward is going behind table).
Can you figure it out?