2

I have a table with dropdowns enter image description here

Dropdown and header of the table are absolute-positioned.

Dropdown has "z-index: 20" Header has "z-index: 10" "top" and "left" properties of dropdown are set in code.

here are styling of dropdown and header

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(1px);
        z-index: 10000;
 }

Dropdown should be above the table header.

The issue appears only in Safari on iOS devices - dropdown is under the header. Does anyone know how to solve this problem?

1
  • can you please make fiddle if you can ? May 6, 2016 at 11:04

2 Answers 2

4

I found out what was the problem. It was because on complicated layout with lot's of styles.

The drop down actually was rendered, but part of dropdown was invisible (seems like as it was overlapped by other div-blocks) but user still could interact with that invisible part.

The problem was that one of the outer parent div-containers has property -webkit-overflow-scrolling: touch; So while rendering Webkit in Safari hid part of dropdown. So I delete that property but left -webkit-transform: translate3d(0, 0, 0); to dropdown and everything started to work great!

1
0

I think you are using z-index & translate3d both on your dropdown. So, When you are using translate3d, then z-index can't be accounted for anymore.

Try below,

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        z-index: 10000;
 }
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.