DropDown Menu in layout cell hidden by cell below

Suite and Optimus Suite 5
#1

Hi,

I have a ribbon bar control in cell a of a 3T layout control (see below).

documentLayout = new dhtmlXLayoutObject(document.body, "3T", dhtmlx_theme);
var ribbonCell = documentLayout.cells("a").attachObject("acidjs-ribbonbar");
documentLayout.cells("a").hideHeader();
documentLayout.cells("a").setHeight(158);
documentLayout.cells("b").setWidth(230);
 documentLayout.cells("b").hideHeader();
dhxAccord = documentLayout.cells("b").attachAccordion();

It works fine in all respects except for the dropdown menus. When they go below cell a, that portion of the dropdown is hidden despite working with the z-index. How do I fix that?

I saw an old thread from 2011 along these same lines saying that a fix for inside a cell was impossible and the solution was to put the menu with a dropdown above the layout control. I am assuming that is where

var menu = documentLayout.attachMenu();

becomes useful. I saw that you offer a similar api for status bar and toolbar, but did not see something like:

var menu = documentLayout.attachObject("acidjs-ribbonbar");

Would that be a viable solution to my problem?

Cheers,

Alex

#2

Hi
Could you provide us image “what you have” and “what you expect”?

#3

Darya,

Hi again.

You can see what is happening to the Display Dropdown below block where it is hidden behind the splitter and cell below.


I would like the dropdown to not be hidden so that the complete dropdown could be seen. Sometimes a picture is worth a thousand words.

Cheers,
Alex

#4

I see. It is z-index issue. If you don’t use iframes, you need just to increase z-index of the menu list zone by CSS.

#5

Darya,

You are right about it being a z-index issue. It is by the dhtmlx developers design to keep content attached to a cell in a layout control constrained within the cell. Just ask them.

I have tried changing the z-index up to 10,000 to no avail - please re-read my first post. It might make more sense now.

In looking at the dhtmlx code and reviewing the forums, the developers created a solution for people with my type of issue. They realized that menus, toolbars and statusbars might all contain content that might need to cover one or more cells and that is why they created

var menu = documentLayout.attachMenu();

which attaches a menu outside of the layout container. That way, it is part of the layout, but technically outside of it allowing the menus to cover one or more layout cells.

I am asking for them to please implement the object case for third party controls, etc. For example, in my case, I am using another vendors ribbonbar control (because you don’t offer one). The api that would work for me is:

var menu = documentLayout.attachObject("acidjs-ribbonbar");

Cheers,
Alex

#6

To help you as well we need completed demo to chech it and help you.
Provided information isn’t enogh to investigate the issue.

#7

Hi all,

I have the same issue, have you resolved that? If yes, then how?

Thanks in advance.

#8

Hi

Could you please provide us complete demo including all correspondnig js/css files?
Please also add information regarding current and expected behaviour.

Here is a small guide how to make a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

If you don’t want to share your demo here for any reasons - you can send it to support@dhtmlx.com, if so - please include link to this forum topic.

If you’re using PRO Edition please send your demo to support@dhtmlx.com

#9

Hi Andrei,

I’ve sent my demo to support@dhtmlx.com with the topic link. The subject is “DropDown Menu in layout cell hidden by cell below”.

Thanks.

#10

Hi

Got the demo. Clicking on ‘open modal’ doing nothig, please attach steps to reproduce?

#11

I’ve checked the modal, it is shown in cell “a”. What about drop-down menu?

#12

I need a quick answer. If there is not a solution for my case, I’ll stop using dhtmlx.

#13

Well, as I already said your demo does not work properly locally. please fix it, test on your side, make sure it work and send us again. Please save your and our time.

#14

Hallo Andrei,

I’ve sent you the modified version, please take a look.

#15

Anybody?

#16

Hi

sorry for the delayed reply. seems like you attached menu/toolbar incorrectly. layout has special api for this:
layout.cells(id).atatchToolbar() or attachMenu()

if your demo it atrtached to a cell, cell has overflow:hidden by the default.

#17

Hi,
when I use:

mainLayout.cells("a").attachToolbar("toolbar"); mainLayout.cells("a").appendObject("modal-div"); or

mainLayout.cells("a").attachMenu("toolbar"); mainLayout.cells("a").appendObject("modal-div");
I receive an error:
Uncaught TypeError: mainLayout.cells(…).attachToolbar is not a function
or
Uncaught TypeError: mainLayout.cells(…).attachMenu is not a function

#18

By the way, I’ve fixed the problem for my case. I had given collapse option to parent cell and after deleting that, z-index problem disappeared. But it doesn’t work for the demo I’ve created in here :slight_smile: