Child Page’s Table Header Shown Over Navigation Menu

I think the below screenshot will explain everything about my issue here.

!(https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20160310-72092-1lsa5ww- __________ 2016-03-09_05.51.19_inline.png “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1379717/RackMultipart20160310-72092-1lsa5ww-__________2016-03-09_05.51.19_inline.png?1457638992”)

I set “Keep Header Visible” as true at table properties of the child page.
Can I make the navigation menu be displayed over the table header?

Yes, you should be able to do this by customizing the CSS of the theme using the Theme Editor, and then setting the z-index property height of the sub-nav menu to be greater than that of the table header.

If you’re using Chrome, it’ll be useful to use “Inspect Element” and look for the right CSS element to override.

Thanks a lot for your advice!

I added the below CSS using the Theme Editor, but the result was the same.

.sk-navigation .sk-subnavigation{
z-index: 1000;
}

Here is the screenshot of CSS element. !(https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20160312-72403-1oo5xii- __________ 2016-03-13_06.12.54_inline.png “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1380945/RackMultipart20160312-72403-1oo5xii-__________2016-03-13_061254_inlinepng1457825081”)

!(https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20160312-35966-dzr903- __________ 2016-03-13_06.25.49_inline.png “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1380948/RackMultipart20160312-35966-dzr903-__________2016-03-13_062549_inlinepng1457825613”)

It seems like that z-index is controlled by somewhere else, maybe JS?

Yea, I’ve run into problems like this myself - and simply had to play around with the css before finding a solution.

Just a guess - but maybe adding !important to your css might help.

.sk-navigation .sk-subnavigation{ z-index: 1000 !important; } 

Sorry I can’t be of more help - I’m just going from memory of problems like this I’ve had myself.

No need for JS.
As you can see in the element.style above, the z-index property gets overridden directly on the element (style attribute is stronger than CSS).

As rmelnik said, adding !important should resolve your issue.

Thank you for your tips.
I tried, but the result was still the same.

!(https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20160314-120297-147ldyk- __________ 2016-03-15_02.04.55_inline.png “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1381755/RackMultipart20160314-120297-147ldyk-__________2016-03-15_020455_inlinepng1457975356”)

!(https://us.v-cdn.net/6032350/uploads/attachments/RackMultipart20160314-4229-1su85q7- __________ 2016-03-15_02.05.12_inline.png “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1381756/RackMultipart20160314-4229-1su85q7-__________2016-03-15_020512_inlinepng1457975426”)

This issue arises only when I checked “Keep Header Visible”.
Something seems to control the structures of z-index, but I am not sure…

Any idea?

Manabu.  What version of Skuid are you running?  In current versions of Skuid I cannot reproduce this error. 

I used 7.32 when I got this error for the first time.
Even after I installed the latest version 7.35, the result is the same.

This error happens only when I scroll down the table a little bit, and “Keep Header Visible” starts functioning.