1

I am trying to use the jQuery-based Wijmo WijMenu control with jqGrid in order to create a dynamic grid toolbar.

enter image description here

Getting the menu to appear works fine. However, my menuitem1 has a submenu, and this submenu falls behind the jqGrid when I hover over 'menuitem1'.

I've tried setting the z-Index on the menu and the individual menu items, but with no luck. This behavior happens on IE9, Chrome, FF and Safari. It does work when I turn compatibility mode on with IE9, which makes me think it may have something to do with the z-index...but I'm not sure. I feel like I'm missing something obvious.

I created a jsFiddle to demonstrate my issue.

Can anyone help me get the submenu to fall in front of the jqGrid?

Thank you in advance for any help/advice.

David Hoerster
  • 28,421
  • 8
  • 67
  • 102

2 Answers2

2

It's not a z-index issue. The .ui-jqgrid .ui-userdata has overflow:hidden on it. Try making it overflow: visible.

Although I'm not sure if it will cause problems on the grid when doing this.

JEBR0
  • 105
  • 6
1

Change your CSS from

.ui-jqgrid .ui-userdata {
    border-left: 0px none;
    border-right: 0px none;
    height: 21px;
    overflow: hidden;
}

.ui-jqgrid .ui-userdata {
    border-left: 0px none;
    border-right: 0px none;
    height: 21px;
}

Removing the overflow:hidden It was hiding your menu.

brenjt
  • 15,997
  • 13
  • 77
  • 118