What do you call this bug and is it a CSS, JS, library bug?

Question

I have this bug happening in my site where my menu drops down and instead of being render on top there is this one area that is under the table.

enter image description here

I am looking for an answer but am not sure exactly what is the bug called, or if it is a CSS, java script, or library problem. The menu is created using Kendo Ui and the table/Grid is created using JqxGrid. If you guys can help me identify the name of this behavior it will help me a lot in finding the solution. Or if you know the reason that is even better. Before I show code I would like to try to solve this on my own. Thank you.

It's difficult to debug without seeing your code. I'm guessing there's a z-index issue or a structural problem. — showdev, Dec 04 '13 at 20:21

score 3 · Accepted Answer · answered Dec 04 '13 at 20:22

3

It looks to me like an issue with your CSS. The row of the grid you have is at a higher z-index than your menu. In my experience the best thing to do is to explicitly (where possible) give your menu items z-indices higher than anything else you have on the page (or would want). eg. if your highest z-index is 100, use 1000 for the menu.

answered Dec 04 '13 at 20:22

Don

3,987
15
32

1

I will look into the z-index thank you. – Jack Thor Dec 04 '13 at 20:23
Z-index that was the problem my menu had a z-index of 498 and the grid's header had a z-index of 499. Thanks man Idk wth z-index was until now. Cool learn something today :) – Jack Thor Dec 04 '13 at 20:31
http://css-tricks.com/almanac/properties/z/z-index/ – Don Dec 04 '13 at 20:41

What do you call this bug and is it a CSS, JS, library bug?

1 Answers1