dhtmlxmenu overflows at top

Suite and Optimus Suite 5
#1

Hi,

I’ve fixed a bug in dhtmlx context menu which lets it overflow at the top of the screen (see screenshot below). It would be nice if you could integrate this in your future releases:

In dhtmlxmenu.js::dhtmlXMenuObject::_showPolygon line 384 add the following code:

if (y+h > my && this.menuY2 != null) {
	y = srcY + srcH - h + 2;
	if (y < 2) { // add this case
		// Don't let the menu overflow at the top
		y = 2;
	}
	// open from top level

Thanks,
Andreas

#2

Hi,

thank you for the information! We have added the fix into the dhtmlxmenu.js (attached file).
dhtmlxmenu.zip (17.5 KB)

#3

Hi,

thank you for your efforts. Unfortunately there was another issue with the code: If you were on a page with a scrollbar and scrolled down a little bit, the menu would still overflow, as it didn’t take the scroll position into account.

If you place the following code in line dhtmlxmenu.js:384 it should now work correctly:

if (y+h > my && this.menuY2 != null) {
	var sy = Math.max(
		(_isIE?document.documentElement:document.getElementsByTagName("html")[0]).scrollTop,
		document.body.scrollTop);
	y = Math.max(srcY + srcH - h - sy + 2, 2) + sy;
	// open from top level

I don’t know whether you have a common function which calculates the scroll top of the page, so I just copied some code I’ve found around line 1524 in the same file for the assignment of sy. Probably you have a better solution for this.

Thank you,
Andreas

#4

Hi,

I just found another problem with Internet Explorer: The computation of the visible area in dhtmlXMenuObject.menuY1/menuY2 does not work correctly there.

If the page has a vertical scrollbar, the computation won’t take the window height, but the complete body height for computation. This results in the context menu being opened to the bottom although there may be no visible space.

If I replace line 1526

this.menuY2 = this.menuY1+(_isIE?Math.max(document.documentElement.clientHeight||0,document.documentElement.offsetHeight||0,document.body.clientHeight||0):window.innerHeight);

with

this.menuY2 = this.menuY1+document.documentElement.clientHeight;

it works with IE9, IE8 and IE7 (and all current non-ie browsers). As I only want to support these three versions of IE this may only be a solution for me.

Probably you have some better idea how to fix that,
Andreas

#5

Hello Andreas,

the problem with scrolls is known. Unfortunately, it is rather complicated to consider all variants for embedding elements in the page and their scrolling.

The solution that you have provided resolves only the problem with scrolling in your page.

Thank you for information.