Search code examples
jqueryhtmlcsskendo-gridcss-position

Dropdown menu hidden inside kendogrid

In my kendogrid I need to show a dropdown menu (on button click) and allow column resizing, showing a scroll bar if my data is too big for the grid. I'm having problems with overflow settings.

Live Sample http://jsbin.com/gayibo/4/edit?css,output

If I set overflow-y: scroll on my grid, the dropdown menu is not always visible. enter image description here

On the other hand, if I set overflow-y: visible, I see overflowing rows on the right. enter image description here

I've tried everything, every possible overflow combination, changing z-indexes, showing the yellow div on top of my excess row data. Nothing worked.

I also tried changing the dropdown menu to position: fixed but it gives problems when you are scrolling the window for any reason (because then the menu is not showing right under the button)

menu position : fixed eg: Fixed positioning of menu

Browser: Chrome / Firefox (ff requires more resizing to get the same effect)

Twitter-Bootstrap: 2.3.2

Solution

  • I tried a lot of different solutions but in the end I chose to use a context-menu plugin, bootstrap themed, binding it to my button click. I'll post a sample code, hoping it will be useful for others in the same situation.

    This is the context-menu plugin I'm using: https://github.com/sydcanem/bootstrap-contextmenu

    It involves a little bit of coding and a plugin but I find that the result is truly excellent for my (visual) needs.

    Here's the jsBin

    enter image description here