Column combo editor width

Webix JS
1

Is there anyway to set the width of the suggest list for a combo editor in a datatable?

I’d like my suggest list to be wider than the column itself, if possible.

2

I didn’t try it specifically in a datatable, but I’ve been working with combo boxes styling recently. I think you’d want something like this for your CSS:

.webix_view.webix_popup {
width: 300px !important;
}

.webix_list {
width: 280px !important;
}

.webix_view.webix_popup is the popup box that appears from the combo box

.webix_list is the actual size of the list inside the popup box

If you use the inspect option in chrome it becomes a bit easier to track down css elements.

3

Wouldn’t that apply to all combo suggest lists? I’m using non-datatable combos elsewhere in my code and wouldn’t want to affect them. I’m guessing that I’d need to set(or get) the suggest list’s html id and add the class/properties directly to that but seems way to hacky.

If there’s a native solution, I’d much rather use that.

4

Oh, yes it would. To set it for specific combo boxes you can add the a spcific CSS name to the end, so like

.webix_view.webix_popup .dtb_cmbo { width: 300px !important; }

Then in your combo boxes in your datatable just add a property

css: “dtb_cmbo”

5

Cheers, your answers lead me there.

In case anyone finds this and wants to do the same, add this to your column that has a combo editor:

suggest:{
	css:{'width':'*intended width* !important'},
	body:{
		css:{'width':'*intended width* !important'}
	}
}

It will only apply to that column.

6

A better solution was shared with me:

suggest:{fitMaster:false, width:100}

fitMaster is set to true by default, and causes that width confinement of the list in the column.