Align for items would be nice. We want to group some items

Suite and Optimus Suite 5
#1

#2

Hello,

We can suggest the following solution:

You need to assing ids to items.

For example you have 3 items which you want to move on the left side of toolbar,
they have the following ids: “cut”, “copy”, “paste” (toolbar’s ids).

You need to create 3 id for DOM with “float:right” style, for example:

#dhxtoolbar_button_cut, #dhxtoolbar_button_copy, #dhxtoolbar_button_paste {
    float: right !important;
}

The you need to assign DOM ids to toolbar items:

dhxToolbar.loadXML(“xml…”, function(){
    dhxToolbar.objPull[dhxToolbar.idPrefix+“cut”].obj.id = “dhxtoolbar_button_cut”;
    dhxToolbar.objPull[dhxToolbar.idPrefix+“copy”].obj.id = “dhxtoolbar_button_copy”;
    dhxToolbar.objPull[dhxToolbar.idPrefix+“paste”].obj.id = “dhxtoolbar_button_paste”;
});

If your button is buttonSelect (for example button “print”), you also need to set class for down arrow:

#dhxtoolbar_button_print, #dhxtoolbar_button_print_arw {
    float: right !important;
}

Then you need to use the following codelines:

dhxToolbar.loadXML(“xml…”, function(){

    dhxToolbar.objPull[dhxToolbar.idPrefix+“print”].obj.id = “dhxtoolbar_button_print”;

    dhxToolbar.objPull[dhxToolbar.idPrefix+“print”].arw.id = “dhxtoolbar_button_print_arw”;
});

#3

Note: this feature will added in the future release.

#4

Works in FireFox but doesn’t seem to work in IE8.
In IE8 Button is rendered with left align and “jumps” to right on mouseover.

#5

Locally the same solution works in IE. Please provide the compelete demo where we can recreate the problem

#6

Works fine if you place CSS in head section an not in body.

#7

Is still in work?

#8

The new version hasn’t been released yet. We plan to release it in few weeks.
This feature will be included in it.

#9

Hi, how can i use the feature?

Old workaround doesn’t work anymore.
Didn’t find align in Toolbar API.

#10

Hi,

the functionality that you need is “spacer”:

dhtmlxToolbar/samples/01_init/13_spacer.html