Start Building Professional
Web Apps Today

How do you set a class on a specific toolbar item

I would like to change the style/look of the buttonSelect item so it looks more like a dropdown combo box while not being hovered on. Problem is I can't find a setting, class or ID I can attach any CSS statements to that is unique to a specific type of toolbar element. Any CSS I try to modify will affect other elements in the doolbar.

Looking at the generated source, this appears to be the chain leading to the root of the select item:
TD dhtmlxToolbarItem
TABLE [unnamed]

TABLE itemDefault
TD dhtmlxToolbarTEXT
selected text
/TD
/TABLE

TABLE itemDefault
TD dhtmlxToolbarArrow
DIV dhtmlxToolbarArrow
Arrow Image
/DIV
/TD
/TABLE

/TABLE
/TD

This same structure is present with the same IDs/Classes for a button element. So this means there is no unique ID or class to differentiate the two. Is there a way to assign a class or HTML ID to a specific element? What I would like is a way to assign a unique ID or class to the parent unnamed table. With that I can apply styles specifically to that toolbar element.

For example:
webBar[ RowID ].setItemClass( ItemID, "SomeCustomClass" );

Any ideas?

Problem with that approach is you don't get a class on the surrounding table around both the text and the arrow so you can border the whole element to look like a dropdown.

I modded a line in the JS file to apply a class to the parent table (around line 1090 in v.2.0 build 81107 :
    this.obj.innerHTML = "<table border='0' cellspacing='0' cellpadding='0' class='dhtmlxToolbarSELECTROOT'><tr><td>"+
I saw no reason adding a class to the parent table would possibly break anything.

It results in the ability to style the root table element as well as the children of it:
http://www.wolfiesden.com/public/toolbarpre.jpg (screenshot)
Your toolbar is being used as part of a quick order form on a site thats currently in development.  Each row is a new toolbar forming a toolbar array thats loaded via XML generated by an ASP product lookup script.

Yes, but it would be nice to be able to do this without modifying your JavaScript.  Since applying a class to the root table shouldn't cause any errors, perhaps putting one on it by default would be a good idea for the next release?