Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Drop down menu hides behind map pane

lfcnutter
Registered User
Quote
2019-02-08 12:29:39

Hi, I'm new to both RocketCake and Leaflet mapping.
I am developing a website that uses mapping for a new service.
The page that contains the map has also a menu bar immediately above the map pane.
When a drop down menu is hovered over the individual entries should be shown, but the drop downs hide behind the map pane.
I checked the menu items have z-index of 10 and the map pane z-index 1
so I think the menu entries should show above the map.
Can anyone help me resolve this anomaly please.
Note: I only have this new website on localhost so can't post a link to show problem. I do have snipping tool jpgs showing situation if that helps.


erik
Registered User
Quote
2019-02-09 07:38:05

What kind of map are you using? Maybe it does something unusual.


lfcnutter
Registered User
Quote
2019-02-09 10:49:08

it's a leaflet map centered on Wales. Nothing special that I can see.
Trawling through the css and javascript that controls the map I can only see the Rocketcake Menu with a z-index of 10 and the leaflet map tile layer with a z-index of 1.
Everything else has no z-index specified.


lfcnutter
Registered User
Quote
2019-02-10 14:41:50

OK with lots of use of developer tools on Chrome I have found a work around.
The wsp_menu.js file is generated every time the web site is published.
This file contains an entry to set up the drop down menu index "menupane.style.zIndex = 10;"

by setting this to be "menupane.style.zIndex = 9999;" it resolves my problem but just creates a new one by me having to manually edit this file after publishing every time.

The navigation menu items within RocketCake have several properties to customise the look and feel of menu items.

Could the properties be extended to include a z-index setting?


niko
Moderator
Quote
2019-02-11 10:35:56

Or simpler, you could simply add a small javascript snipped on your page, setting the zorder of the menu back. Maybe that would also be a solution?


lfcnutter
Registered User
Quote
2019-02-11 11:11:13

Hi Niko, not sure how that would be coded / work. the menu panes are dynamically added and show in developer tools under element.style which I think can't be overridden. If I'm wrong could you show me sample code to do this please?


niko
Moderator
Quote
2019-02-12 09:17:23

Place a JavaScript code element into the page and paste this code:


var menuid = 'menu_46617e6a';

function fixZIndex(elem)
{
var children = elem.children;
for (var i = 0; i < children.length; ++i)
{
if ( children[i].style.zIndex == 10)
{
children[i].style.zIndex = 9999;
fixZIndex(children[i]);
}
}
}

fixZIndex(document.getElementById(menuid));


Don'T forget to replace the id (menu_46617e6a) in the first line with the actual id of your menu. I think it should work.


lfcnutter
Registered User
Quote
2019-02-14 14:14:28

Niko, code works just fine thanks
I would still prefer to have code executed at publish time rather than on client side every time a page is loaded.


niko
Moderator
Quote
2019-02-15 08:34:18

Yes, understandable. But to make you feel better: The menu just does exactly that: execute code on the client side every time the page is loaded. View it as extension code to your menu


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internat?onal" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact