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?
You can try to use the following approach:
toolbar.forEachItem(function(itemId){
if (toolbar.objPull[toolbar.idPrefix+itemId][“type”] == “buttonSelect”){
var item = toolbar.objPull[toolbar.idPrefix+itemId];
item.obj.className = “…”; /class for text/
item.arw.className = “…”; /class for arrow/
}
});
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 = “
| ”+ 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: 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. |
Hello,
it seems that you’ve already found the solution for the issue… Am I right ?
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?
Hello,
the latest toolbar version doesn’t contains table tags. It is different from the 81107. Buttons are div elements with a certain css class.
I’m not sure what the right approach is after reading this post… but then this post is old so maybe there is a better way to do it now?
I need to be able to modify a buttonSelect object’s style as follows:
background color
border
font size, type, color
I’ve tried the suggestion
var item = toolbar.objPull[toolbar.idPrefix+‘buttonID’];
item.obj.className = “buttonSelectStyle”;
where “buttonSelectStyle” is a class containing these style attributes.
This code executes but doesn’t seem to have any effect.
(I tried setting text to green to see if it made a difference. I see green flash for a split second when screen is refreshed but then it reverts to default style)
What is the recommended approach?
Do you want change the style of a certain select or all selects in a toolbar ?
All selects in the toolbar…
Also, how to change style for a textitem on the toolbar? (eg, make font bold)…
thank you.
You may redefine css classes the are defined in the dhtmlxtoolbar_dhx_skyblue.css
.dhx_toolbar_base_dhx_skyblue div.dhx_toolbar_btn {
…
}
.dhx_toolbar_base_dhx_skyblue div.dhx_toolbar_btn.over {
…
}
Styles for text button:
.dhx_toolbar_base_dhx_skyblue div.dhx_toolbar_text{
…
}
Thank you that works great!