Start Building Professional
Web Apps Today

dhtmlx menu items position

I have an question regarding the positioning of items on the menu. I would like to align the items on the menu to the right. By default the items are aligned to the left. For example, the current format displays

--------------------------------------------------------------
File Edit Format Layout
--------------------------------------------------------------

I would like to have it as

--------------------------------------------------------------
File Edit Format Layout
--------------------------------------------------------------

How do we do this? Also, is it possible to give a gap between items in the menu ? For example,

--------------------------------------------------------------
File Edit Format Layout
--------------------------------------------------------------

Please respond at your earliest convinience. I am using the latest version of the control.

Thanks,
Niranjan Avadhuta.

>> I would like to align the items on the menu to the right.
dhtmlxMenu 2.0 support topLevel items rendering only to the left side.

>> is it possible to give a gap between items in the menu ?
1. in the code:
     dhtmlXMenuObject.prototype._redistribTopLevelPositions = function() {
       .....
          w += this.base.childNodes[q].offsetWidth;
          // fix to
          w += this.base.childNodes[q].offsetWidth + 10; // 10 is a gap on the right side
2. in the code:
      dhtmlXMenuObject.prototype._renderToplevelItem = function(id, pos) {
          ....
            if (pos != null) { this.base.insertBefore(m, this.base.childNodes[pos]); this._redistribTopLevelPositions(); } else { this.base.appendChild(m); }
            // fix to
            if (pos != null) { ... } else { this.base.appendChild(m); this._redistribTopLevelPositions(); }
another way:
       fix in css:
             div.dhtmlxMenu_dhx_blue_TopLevel_Item_Normal {
             div.dhtmlxMenu_dhx_blue_TopLevel_Item_Disabled {
             div.dhtmlxMenu_dhx_blue_TopLevel_Item_Selected {
                ....
                padding-left: 7px;
                padding-right: 7px;