Tabbar CSS customizing

Hi to everybody.

In Suite 5 metal skin i’ve this problem.

In my page i’ve a Tabbar with metal skin. In the same page i’ve a secondary Tabbar that i’d like to show as a layout header (with the same color). But in 5 version the customize function is deprecated.
Of course it would be a CSS problem but i don’t understand how and wich CSS i’ve to use to diversify my two tabbars. Can somebody help me ?

Many thanks.

Please Sematik can you help me ?.

i’ve another question. Suite 5.2, i read, should include touch support. Do you confirm ?

i’ve this problem. I’m using Firefox both on laptop (with windows) and tablet/phone with Android. The strange behaviour is that combobox not always open the list. Inside a Form the combo seems to run correctly in both the environment but with a combo inside a Toolbar work correctly with Firefox-window but doesn’t work on Firefox-Android. is it a bug ? can i solve it ?

Hi Sematik.

I understoo that, anyway, if you need to run a webapp on a mobile device you can’t simply use the desktop version even if the contrlols supports touch. On this devices the user experience is different and is different the way to interact in data entry. I’d’like to use dhtmlx-touch. I don’t understand why you have stopped development but anyway for my need seems to be a good choice. i downloaded the last version (12) but i can’t find the dhtmlx-touch designer. The online version is no available and i didn’t find the downloadable version, if exist.
How can i find it.

Thanks

In the dhtmlxSuite 5 there is no metal skin. The available skins are “terrace”, “material”, “web”, “skyblue”.
Here you can find the online skin builder allowing you to create your own skin with the needed look:

If the problem still occurs for you please, provide a complete demo that can be checked locally with the details of a needed customization, so I could suggest you a proper solution.

i’ve another question. Suite 5.2, i read, should include touch support. Do you confirm ?

i’ve this problem. I’m using Firefox both on laptop (with windows) and tablet/phone with Android. The strange behaviour is that combobox not always open the list. Inside a Form the combo seems to run correctly in both the environment but with a combo inside a Toolbar work correctly with Firefox-window but doesn’t work on Firefox-Android. is it a bug ? can i solve it ?

There is no combo in the dhtmlxToolbar v5. The only available control is a buttonSelect:
https://docs.dhtmlx.com/toolbar__select_button.html
Could you please, check if your problem occurs for you here:
https://snippet.dhtmlx.com/5/d1dcd5ba0
or here:
https://dhtmlx.com/docs/products/dhtmlxToolbar/samples/07_item_button_select/01_creation.html

Hi Sematik,

Sorry for misunderstanding. I was speaking of material skin where i’d like to create an alternative css for TABBAR to use it in the same page where i’ve two different Tabbar that i’d like to represent with different looks.

About the combo problem i know that toolbar includes only “select” object but i used a snippet that i found on the forum to include a combo that is very useful. (sorry i forgot to say to you):

abToolbar.addText(“combo1”, 0, “”);

abToolbar.objPull[abToolbar.idPrefix+“combo1”].obj.innerHTML = “”;
comboDIV1 = abToolbar.objPull[abToolbar.idPrefix+“combo1”].obj;
comboAbilitazioni = new dhtmlXCombo(comboDIV1,“alfa”,210);
comboAbilitazioni.load(“data/abilitazioni_combo.php”);

All works fine in Windows system. In Android, instead, clicking or touching on combo never open the option box. Is there a trick to solve the problem ?

Many thanks

Hi Sematik to explain better the combo problem, please look at this snippet that you sent me time ago on which i based my code.
If your run it on a Android device (smartphone or tablet is the same) you’ll notice that is very difficult to open the listbox of combo touching it, while combo inside a Form in the same environment runs correctly.

The strange behaviour is that on a windows device (tablet included) runs correctly.

DHTMLX Snippets_ga_N87XPB4GSGMTY5NDc3MzA2MS4yLjEuMTY5NDc3Mzk3NS4xNC4wLjA.&_ga=2.207680402.1859232856.1694703109-52354272.1694703109

Hi Sematik. Please i need help on combo problem.

Thanks

Hi Sematik. I’ve to solve the problem of the combo inside Toolbar (see the messages before). it seems not responding on touch deviceses, Android and IOS too.
You can try with the Snippet i paste in previous message.

Thank you

For the tabbar customization you can try to use the tabbar container id to differ the customization for your tabbar objects.
Something like:
http://snippet.dhtmlx.com/5/074bac9c6

What for the combo in the toolbar, unfortunately I was not able to solve this problem. I can only suggest you to use the default buttonSelect control of the toolbar.

Thank you Sematik but i tried to analize the problem of combo and now i think it could be a CSS problem. If yoyu try this snippet:
[DHTMLX Snippets…_ga_N87XPB4GSGMTY5NDc3MzA2MS4yLjEuMTY5NDc3Mzk3NS4xNC4wLjA.&_ga=2.207680402.1859232856.1694703109-52354272.1694703109](https://DHTMLX Snippets…_ga_N87XPB4GSGMTY5NDc3MzA2MS4yLjEuMTY5NDc3Mzk3NS4xNC4wLjA.&_ga=2.207680402.1859232856.1694703109-52354272.1694703109)
with a touch device you have problem to open the combo. This snippet is for material - skin.
In this other example, founded on the forum (see the attachmen)
toolbar_combo.zip (88.3 KB)
, your colleague use skyblue-skin and the problem simply doesn’t exist.
So i think it could be a css problem on material-skin. Which classes could be responsable of this issue ?

Many thanks if you give me some help. I know that i could use buttonselect but combo is more flexible to use and in loading option.

Thanks Sematik. For the tabbar customization it’s a good idea starting from tabbar container but i don’t initialize the tabbar from html but i attach from layout. Layout.cells(“a”).attachTabbar({…configuration…})

In this case how can i refer to the tabbar to change the Style as in the Snippet ?

if i use simply:
.dhxtabbar_tab_text{
background-color: red !important
}
of course the color change for all the tabbars in the project. There must be a way to reach the specific object. I’m sorry but i don’t know the DOM structure very well.

Thank you again for your help