CSS Translated parent's sibbling hides child - html

Question

I'm using ngx-datatable. It uses transform: translate3d to position every row using its height. The problem comes when I put a dropdown inside and the element below it hides the dropdown's options. As shown in the follow images:
My ngx-datatable configuration:
<ngx-datatable #chemicalResistanceGrid class="table-striped"
[cssClasses]="..."
[rows]="..."
[count]="..."
[limit]="..."
[rowHeight]="68"
[headerHeight]="40"
[footerHeight]="40"
[scrollbarV]="true"
[scrollbarH]="true"
[columns]="gridColumns"
[rowClass]="getRowClass"
[columnMode]="'force'">
<!---->
</ngx-datatable>
These examples are simpler simulations of my problem:
If I set the row elements with a sequenced z-index, the child elements are shown like:
row 0 element: (z-index: 100)
row 1 element: (z-index: 99)
This solution is not an option. I want the same result as the z-index approach and the ideal solution needs to use CSS as well. This is how the layout need to look like.
This is the entire simulation code and its snippet:
ul {
background: #b6ff00;
border-radius: 0 0 10px 10px;
}
li {
list-style: none;
}
section.datatable-body {
width: 1252px;
height: 420px;
overflow-y: auto;
overflow-x: auto;
position: relative;
z-index: 10;
display: block;
box-sizing: border-box;
font-size: 13px;
line-height: 1.42857143;
color: #333;
}
section.datatable-selection {
box-sizing: border-box;
}
section.datatable-scroller {
height: 5576px;
width: 1650px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
box-sizing: border-box;
}
section.datatable-row-wrapper {
position: absolute;
background-color: #f9f9f9;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-sizing: border-box;
white-space: nowrap;
font-size: 13px;
line-height: 1.42857143;
color: #333;
box-sizing: border-box;
}
section.datatable-body-row {
height: 68px;
width: 1650px;
white-space: nowrap;
outline: none;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
box-sizing: border-box;
direction: ltr;
}
section.datatable-row-center {
width: 1650px;
display: flex;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-flow: row;
box-sizing: border-box;
white-space: nowrap;
}
section.datatable-body-cell {
width: 150px;
min-width: 200px;
max-width: 600px;
height: 68px;
/**/
white-space: nowrap;
text-overflow: ellipsis;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
vertical-align: top;
display: inline-block;
line-height: 1.625;
text-align: left;
padding: .8rem 1.2rem .5rem;
transition: width .3s ease;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
box-sizing: border-box;
-webkit-box-direction: normal;
}
section.datatable-body-cell-label {
box-sizing: border-box;
white-space: nowrap;
display: block;
line-height: 1.625;
text-align: left;
-webkit-box-direction: normal;
}
section.form-horizontal {
box-sizing: border-box;
margin: 0;
outline: 0;
color: #666;
position: relative;
display: block;
line-height: 1.625;
white-space: nowrap;
text-align: left;
-webkit-box-direction: normal;
}
section.ngx-select {
-webkit-border-radius: 0 !important;
-webkit-box-shadow: none !important;
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 32px;
box-sizing: border-box;
border: 1px solid #ccc;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
section.ngx-select-dropdown {
box-sizing: border-box;
margin: 0;
padding: 0;
display: block !important;
position: relative;
text-align: left;
}
section.ul {
width: 100%;
height: auto;
max-height: 200px;
overflow-x: hidden;
margin-top: 0;
position: absolute;
border: 1px solid red;
border-radius: 4px 4px;
bottom: 5px;
animation-name: flipInX;
animation-fill-mode: both;
box-sizing: border-box;
margin: 0;
padding: 0;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
list-style: none;
font-size: 13px;
text-align: left;
}
.li {
box-sizing: border-box;
margin: 0;
padding: 0;
display: list-item;
text-align: -webkit-match-parent;
border: 1px solid red;
}
<html>
<head>
</head>
<body>
<section class="datatable-body">
<section class="datatable-selection">
<section class="datatable-scroller">
<section class="datatable-row-wrapper" style="transform: translate3d(0px, 0px, 0px);backface-visibility: hidden;">
<section class="datatable-body-row">
<section class="datatable-row-center">
<section class="datatable-body-cell">
<section class="datatable-body-cell-label">
<section class="form-horizontal">
<section class="ngx-select">
<section class="ngx-select-dropdown">
<ul id="ul">
<li class="li">Test 1</li>
<li class="li">Test 2</li>
<li class="li">Test 3</li>
<li class="li">Test 4</li>
<li class="li">Test 5</li>
<li class="li">Test 6</li>
<li class="li">Test 7</li>
<li class="li">Test 8</li>
<li class="li">Test 9</li>
<li class="li">Test 0</li>
</ul>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
<section class="datatable-row-wrapper" style="transform: translate3d(0px, 68px, 0px);backface-visibility: hidden;">
<section class="datatable-body-row">
<section class="datatable-row-center">
<section class="datatable-body-cell">
<section class="datatable-body-cell-label">
<section class="form-horizontal">
<section class="ngx-select">
<section class="ngx-select-dropdown">
<ul id="ul">
<li class="li">Test 1</li>
<li class="li">Test 2</li>
<li class="li">Test 3</li>
<li class="li">Test 4</li>
<li class="li">Test 5</li>
<li class="li">Test 6</li>
<li class="li">Test 7</li>
<li class="li">Test 8</li>
<li class="li">Test 9</li>
<li class="li">Test 0</li>
</ul>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
<section class="datatable-row-wrapper" style="transform: translate3d(0px, 136px, 0px);backface-visibility: hidden;">
<section class="datatable-body-row">
<section class="datatable-row-center">
<section class="datatable-body-cell">
<section class="datatable-body-cell-label">
<section class="form-horizontal">
<section class="ngx-select">
<section class="ngx-select-dropdown">
<ul id="ul">
<li class="li">Test 1</li>
<li class="li">Test 2</li>
<li class="li">Test 3</li>
<li class="li">Test 4</li>
<li class="li">Test 5</li>
<li class="li">Test 6</li>
<li class="li">Test 7</li>
<li class="li">Test 8</li>
<li class="li">Test 9</li>
<li class="li">Test 0</li>
</ul>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</body>
</html>

Answer 1

After some research I found the problem. The key point here is the transform element(transform:translate3d(0px, Xpx, 0px)). There is a note in W3school which enforce to use transform-style along with transformation. So, where ever I using transform I MUST use a desired transform-style mechanism; in this case preserve-3d which mean the children of the transformed element will keeps its own position. The other thing I noticed is the z-index doesn't works for the children of the transformed element. What was worked for me was the transform: translateZ(1px).
So:
database-scroller -> added transform-style: preserve-3d
datatable-row-wrapper -> keeps its transform:translate3d(0px, xxpx, 0px)
datatable-body-row.editMode(when it's in editMode)-> added transform: translateZ(1px);
$(function () {
$('.toggle-dropdown').on('click', function () {
var drop = $(this).parents('.container').find('.element');
var row = $(this).parents('.container').find('.row');
$(row).toggleClass('editMode');
$(this).html($(row).hasClass('editMode') ? '↑' : '↓');
});
});
section.wrapper {
position: relative;
transform-style: preserve-3d;
}
section.container {
position: absolute;
transform-style: preserve-3d;
height: 40px;
width: 100%;
background-color: aliceblue;
z-index: 1000;
}
div.cell {
width: 200px;
padding: 10px;
vertical-align: top;
display: inline-block;
position: relative;
}
div.editMode {
transform: translateZ(10px);
}
ul.element {
background-color: beige;
list-style: none;
z-index: 1000;
margin: 0;
padding-left: 5px;
display: none;
transition: visibility 0s, opacity 0.5s linear;
}
.editMode ul.element {
display: block;
}
.icon {
padding: 2px 5px;
background-color: gray;
border: 1px solid gray;
border-radius: 5px;
cursor: pointer;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<section class="wrapper">
<section id="row1" class="container" style="transform:translate3d(0px, 0px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
<section id="row2" class="container" style="transform:translate3d(0px, 40px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
<section id="row3" class="container" style="transform:translate3d(0px, 80px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
<section id="row4" class="container" style="transform:translate3d(0px, 120px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
</section>
</body>
</html>