How to show jquery ContextMenu in Fullscreen Mode?

Question

I added a contextmenu to a div. Everything works fine now i set the div to fullscreen with .requestFullscreen(). The div is now in fullscreen but the contextMenu doesnt appear anymore.

What do i need to change to make it appear?

Here is my code:

$.contextMenu({
            selector: '.fixed-size-info',
            zIndex: 100,
            callback: function(key, options) {
                switch (key) {
                    case 'fullscreen':
                        if( window.innerHeight == screen.height) {
                          // browser is fullscreen
                          self._div.exitFullscreen();
                          var target = {
                            parent: self._selectedGuid
                          };
                          self.openParentInfo(target, self);
                        } else {
                          document.getElementById('fixed-size-info').requestFullscreen();
                          // openFullscreen(document.getElementById('fixed-size-info'));
                          // openFullscreen(self._div);
                          self.table.style.height = '100%';
                          var target = {
                            parent: self._selectedGuid
                          };
                          self.openParentInfo(target, self);
                        }
                        break;

                    default:
                        console.log(key);
                        console.log(options);
                }
            },
            items: {
                "fullscreen": {
                    name: "Fullscreen",
                    icon: "fas fa-expand"
                },
                "sep1": "---------",
                "quit": {
                    name: "Quit",
                    icon: function() {
                        return 'context-menu-icon context-menu-icon-quit';
                    }
                }
            }
        });

pls add your HTML & JS code for better understanding of issue. — Shiv Kumar Baghel, Jun 24 '19 at 08:47

score 1 · Accepted Answer · answered Jun 24 '19 at 09:03

1

I think the problem is that the z-index of your context menu (100 in your case) is too small, below the fullscreen div z-index (which is aound 2147483647).

You should check the SO answer here: Displaying elements other than fullscreen element (HTML5 fullscreen API)

answered Jun 24 '19 at 09:03

verjas

1,793
1
15
18

I guess I need to find an other fullscreen method. Since i cant add the contextmenu as a child of the div. Or do you know how i can solve the issue? – Patrick Lüthi Jun 24 '19 at 09:24
Hmm... i don't have a quick solution. Maybe you can use .detach() and .append() on the contextmenu div, to make it a child of the parent fullscreen div? – verjas Jun 24 '19 at 09:32

How to show jquery ContextMenu in Fullscreen Mode?

1 Answers1