Child Page’s Table Header Shown Over Navigation Menu

  • 2
  • Question
  • Updated 3 years ago
  • Answered
I think the below screenshot will explain everything about my issue here.




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?
Photo of Manabu

Manabu

  • 110 Points 100 badge 2x thumb

Posted 3 years ago

  • 2
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
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.
(Edited)
Photo of Manabu

Manabu

  • 110 Points 100 badge 2x thumb
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.



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

Thimo

  • 1,280 Points 1k badge 2x thumb
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.
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
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.
(Edited)
Photo of Manabu

Manabu

  • 110 Points 100 badge 2x thumb
Thank you for your tips.
I tried, but the result was still the same.





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?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Manabu.  What version of Skuid are you running?  In current versions of Skuid I cannot reproduce this error. 
Photo of Manabu

Manabu

  • 110 Points 100 badge 2x thumb
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.