Start Building Professional
Web Apps Today

dhtmlxCombo into a dhtmlxToolBal

Hello guys,

I really need to embed a dhtmlxCombo into a dhtmlxToolbar.
As I read here : http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=1548&ssr=yes&s=combo%20in%20toolbar
It seemed, at the time, not possible.
I tried out the workaround but did not achieve the attended result.

Is there now any proper way to do it or a another workaround ?

Thanks,
Nicolas.

Please check attached sample, it shows how combo can be added to the toolbar. 

Thanks for your input.
I finally succeed to embed this combo.
One minor but important glitch though, is that when input text is selected, there no 'inverse color' effect.
This glitch could be seen in your provided sample.

It seems it comes from this css rule :

table.dhtmlxToolbarTable_dhx_blue td.dhtmlxToolbarTEXT {
    padding: 2px;
    padding-right: 5px;
    -moz-user-select: none;
    text-align: left;
}

I tried to redefine locally this CSS rule for the input of the dhtmlxCombo but  any other value  is overridden by the parent container dhtmlxToolbarTEXT.

I believe that a solution would be to create a new type of container like dhtmlxToolbarCOMBO, and put correct CSS rules.
Any idea ?

You can add next two styles to the page ( or directly at the end of toolbar's css file )

table.dhtmlxToolbarTable_dhx_blue td.dhtmlxToolbarTEXT {
-moz-user-select:-moz-none;
}
.dhx_combo_box input{
-moz-user-select:text;
}

It will preserve all existing functionality of toolbar, but text in combo will be selectable now. 

Also , to work correctly in IE , next line need to be added 

var z = new dhtmlXCombo("combo_here","acombo","100%")
z.DOMParent.onselectstart=function(e){ return(e||event).cancelBubble=true; }

Thanks for the provided code, workaround works now perfectly.