javascriptcssgolden-layout

Contex/popup menu is cut on splitter of golden layout

I would like to show a context menu for the items in a tree view. The menu should be shown on top of all other element and it should also cross the borders of a GoldenLayout (http://golden-layout.com/). However, the menu is "cut" on the split pane:

enter image description here

I tried to set an absolute position and increase the z-index. That did not help. Maybe the reason is the style overflow = hidden for some parent divs?

enter image description here

=> If I want to allow my context menu to cross lyout borders, what is the right way/location to modify the GoldenLayout config?

(I only want the context menu to cross borders, not the other content of the tree view.)

var menu = selection.append('div')
           .className('treez-context-menu'); 

 .treez-context-menu {
    position: absolute;
    z-index: 100;
    display: none; 
    outline: thin solid lightgrey;
    background-color: white;
}

Related:

CSS I want a div to be on top of everything

Solution

  • Changing the css position for the menu from absolute to fixed did the trick:

    .treez-context-menu {
    position: fixed; //changed from absolute to fixed
    z-index: 100;
    display: none; 
    outline: thin solid lightgrey;
    background-color: white;
}