Custom ComboBox css

Hi guys,
i recently found combobox and i managed to adapt your library to my wordpress theme, but now i would like to change it’s style (mainly the box)

i managed to change the background color of the textarea and the font but i don’t have a clue on where can i change the border of the box, and the height and width of the box. could you please tell me what do i need to edit please?

Plus, is the web skin a responsive one or should i make it so?

(i’m using the dhtmlxcombo_dhx_web.css)

Hi
Here is a little code sample for you with some settings:

comboBase = combo.getBase(); comboBase.style.backgroundColor = "#b1daf6"; comboBase.style.borderColor = "#3da0e3"; comboBase.style.borderWidth = "2px"; comboBase.style.height = "50px"; combo.getInput().style.backgroundColor = "#b1daf6"; combo.getList().style.backgroundColor = "#d1e8f8";
The result is on the picture:

Hi there! thanks! i managed to solve this today (before i read your answer) and it was pretty much similar to your answer hehe.

i have another answer, though, could you tell me how can i make the combobox responsive? i have the web skin. i chose that one cause i thought it would be responsive but it’s not.

i suppose i have to use the @max-width attribute or something, but i don’t know which css attribute controls the combobox width :frowning:
could you help me out with this?
thanks!

Combo will not be responsive on window resize, but at first init it can be adapt to the container size
Something like if

<div id="combo_zone" style='width:100%'></div> ... var myCombo; function doOnLoad() { myCombo = new dhtmlXCombo("combo_zone", "combo"); myCombo.load("../common/data2.json"); }
Combo will have 100% width too

Plus there is a method setSize
docs.dhtmlx.com/api__dhtmlxcombo_setsize.html

Cool i’ll try that!

do you, by any chance, know if i can i add the @media attribute to the style?

Yes, you can add it :slight_smile:

Could you please tell me which css attribute controls the width? i have only 1 css file (dhtmlxcombo_dhx_web.css) but i can’t seem to find it.

i’ve been trying to add @media queries at the end of the file:

[code]@media(max-width: 500px) {
div.dhxcombo_dhx_web{
width:250px;
}
}

@media(max-width: 767px) {
div.dhxcombo_dhx_web{
width:350px;
}
}

@media(max-width: 1200px) {
div.dhxcombo_dhx_web{
width:400px;
}
}[/code]

But i have to add !important to one of them for it to actually change, and if i do so in every media query, it will not resize at all, it will remain with the last width set (400px).

The only other code i have is this:
prntscr.com/98u3ku

with this setting it’s only adding a 100% width, which is a nice workaround but if you resize the windows, the bar won’t resize so it’s only a temp. fix.

and this is how i’m creating the combobox:
prntscr.com/98u4ag (the screenshot didn’t get the last bracket but it’s there).

the code works alright, the only problem here is that i don’t know where is the “default” size coming from, nor do i know what controls the width of the search bar, and without that i won’t know how to code the queries :confused:

could you please help me out?

thanks!

oh yeah and i also have another problem.
Whenever i put the div element with the combobox, it sort of eliminates the background color where it’s put on, what css attribute should i edit if i want to add a background color? (i’ve tried adding some styling to the div element and also to the p element and then wrapping the whole div into a p but it doesn’t work. i’ve also tried adding adding a style inside the div tag with the same negative result).

Thank you very much!

To get help for a solution of your issue please open a ticket in our support system:
support.dhtmlx.com/

Nevermind! found the solution! it took a lot of trial and error but i did it, here’s what i did in case everybody else wandered:

[code]
@media (max-width:767px) {
#combo_zone{
width:80% !important;
}
@media (max-width:500px) {
#combo_zone{
width:100% !important;
}
}
@media (max-width:1200px) {
#combo_zone{
width:60% !important;
}
}

[/code]

by the way do i have to buy a premium licence to get support? i don’t know if i have any support number or something like that (i downloaded everything with the standard plan i believe. the one that was for free)

I thought i had the combo resizing but it turns iut it isn’t (it was only a cache issue) so i’m kind of surrendering here, i don’t know the combo css so i’m having a very hard time adapting it :confused:

Please contact sales@dhtmlx.com to get more details about our licenses.