Start Building Professional
Web Apps Today

DhtmlxMenu positionning error

I use standard menu with standard xml, and i tried with samples too and my submenu are always positionned too far from my menu.
I tried all possibilities popup or classic styles, absolute, auto or relative positionning.
What's wrong ?

html :
<div id="menuBox"></div>
<script type="text/javascript">
    var menu = new dhtmlXMenuBarObject("menuBox","","","",0);
menu.setGfxPath("<c:url value="/dhtmlx/dhtmlxMenu/codebase/imgs/"/>");
    menu.loadXML("<c:url value="/config/acquisition_menu.xml"/>");
    menu.showBar();
</script>

xml:
<?xml version='1.0' ?>
<menu maxItems="12" name="" mixedImages="yes">
    <MenuItem name="New" src="programs.gif" id="main_file" width="120px" panelWidth="130px" withoutImages="yes">
        <MenuItem name="Advertisement" id="advertisement"/>
        <MenuItem name="Library" id="library"/>
        <MenuItem name="Media" id="media"/>
        <MenuItem name="Person" id="person"/>
        <MenuItem name="Physical Support" id="physical_support"/>
        <MenuItem name="Production" id="production"/>
        <MenuItem name="Promotion" id="promotion"/>
        <MenuItem name="Series" id="series"/>
    </MenuItem>
    <MenuItem name="Material Finder" src="programs.gif" id="main_file" width="120px" panelWidth="130px" withoutImages="yes">
        <MenuItem name="Library" id="library"/>
        <MenuItem name="Media" id="media"/>
        <MenuItem name="Physical Support" id="physical_support"/>
    </MenuItem>
    <MenuItem name="Content Finder" src="programs.gif" id="main_file" width="120px" panelWidth="130px" withoutImages="yes">
        <MenuItem name="Advertisement" id="advertisement"/>
        <MenuItem name="Person" id="person"/>
        <MenuItem name="Production" id="production"/>
        <MenuItem name="Promotion" id="promotion"/>
        <MenuItem name="Series" id="series"/>
    </MenuItem>
</menu>

If you are using layout from absolute positioned element, it may cause page to have zero height, and as result menu auto positioning feature will fail.
Problem can be resolved by adding next line of code
    menu.disableSmartPositioning(true)

Please check attached sample.

I use the menu in a tabbar which is defined like this :

html:
                <div id="tabbar" style="width:1010px; height:700px; top:-22px; position:relative">
                </div>
                <script type="text/javascript">
                    var tabbar=new dhtmlXTabBar("tabbar","top");
                    tabbar.setImagePath("<c:url value="/dhtmlx/dhtmlxTabbar/codebase/imgs/"/>");
                    tabbar.loadXML("<c:url value="/config/tabbar.xml"/>");
                    tabbar.setStyle("modern");
                </script>


xml:
<?xml version="1.0"?>
<tabbar hrefmode="ajax">
    <row>
        <tab id="b1" width='100px' selected="1" href="/iDTV3WebVOD/home.ajax">HOME</tab>
        <tab id="b2" width='100px' href="/iDTV3WebVOD/acquisition/init.ajax">ACQUISITION</tab>
        <tab id="b3" width='100px' href="/iDTV3WebVOD/vod.do">VOD</tab>
        <tab id="b4" width='100px' href="/iDTV3WebVOD/test.do">TEST</tab>
        <tab id="b5" width='100px' href="/iDTV3WebVOD/vod/init.ajax">VOD DXHTML</tab>
    </row>
</tabbar>

and it doesn't rules right. I've got no changes with
menu.disableSmartPositioning(true);

Unfortunately, menu is not compatible with tabbar in ajax and ajax-html mode.

You can try to use other modes, like iframes or html.

It's incredible !!!
Why the positionning of the menu is tabbar ajax mode dependant ?
What's the relation between ajax and positioning in html ?
i'm very disapointed

The problem caused by the way hot position of context menu calculated, the menu was built to be used as part of normal HTML flow, so it may fail when placed in relative positioned container - if necessary we can provide menu build which will work fine enough in case of tabbar, but it will differ from common codebase.