DropDown menu overlaps Content

  

Dear all,


my RichWidget DropDown menu (panel) overlaps my content. In that case the submenu-items in that panel doesn't work any more, i.e. aren't 'clickable'....
In another screen with still no content the menu works perfectly.
Someone?

Strangest thing just happened.
Copied all containers e.t.c. from MainContent Placeholder to a new page.
On this new page the problem doesn't occur?!!!

Hello Joeren.

Do you have any CSS defined in the Stylesheet of the page? A div that stays over the menu would cause this kind of thing.

You can open the page in browser, inspect it and see if there is anything over the sub menus.

Cheers

That's indeed a little strange. Can you check the Widget Trees of both Screens to see if anything is different? Or is different CSS applied to the pages?

Same page, same CSS, and exactly the same WidgetTree...
Yesterday I was debugging within Chrome and changed a few things in CSS...
Maybe a caching/memory thingie?

Ah, yeah, that could very well be the case. Try to press Ctrl-F5 to reload the old page and see if it works then.

Problem in the old screen still occurs...
I see the only difference is that the content (within MainContent) of the old screen has a 'z-index: 150;'

The new screen hasn't.
If i change this using Chrome (Inspect-->Element-->Styles), also the new page doesn't work anymore....

Yeah, the z-index specifies the order in which elements are rendered, so this completely explains why it goes wrong then :).

So, you have a style being applied.

Where are it coming? 

I know, but the panel has a 'z-index:200;'.
I thought in that case it should work.....

Hi Jeroen,

You're right, if the panel has a higher z-order I would expect it to work, but there may be other things going on. Investigation time :).

Z-index is not so simple 

A example.

Div A(z-index:0)

     |...Div A1 (z-index:200)

div B (z-index:1)

     |...Div B1 (z-index:2)

B1 will overlap A1

Indeed Eduardo.
I see the London-Theme uses 'z-index:10;' for the Header!
The menu (which is in the Header.ThemeGrid_Wrapper) uses also another z-index.

My mistake is to expect that the element you see (in my case the panel) is also the element that would react on a mouse-click for example...


In that case the z-index that will be compared will be 10.

You can change it with css and solve the problem.

Cheers

Indeed I can change the CSS. And it worked obviously :-)
Still a little surprised that i can see the panel, but it doesn't work...

Solution

Jeroen Vormer wrote:

Indeed I can change the CSS. And it worked obviously :-)
Still a little surprised that i can see the panel, but it doesn't work...

Well...

The menu is being positioned using absolute position. This means that it will be removed from the normal flow of the page. That's the reason it can be in front or back of other elements.

If there is a DIV in front of it, while a div can be "invisible" (no background, no border, etc), it is still an element, and being in front, it will receive the click instead of the elements behind it. That's the reason why you can see it, but the link does not work. :)

Cheers.


Solution

Eduardo Jauch wrote:

Jeroen Vormer wrote:

Indeed I can change the CSS. And it worked obviously :-)
Still a little surprised that i can see the panel, but it doesn't work...

Well...

The menu is being positioned using absolute position. This means that it will be removed from the normal flow of the page. That's the reason it can be in front or back of other elements.

If there is a DIV in front of it, while a div can be "invisible" (no background, no border, etc), it is still an element, and being in front, it will receive the click instead of the elements behind it. That's the reason why you can see it, but the link does not work. :)

Cheers.



Thanks Eduardo !!