Multi-column DropDowns

Several Wijmo controls have drop-down elements that show lists, calendars, or other editors.

Styling the drop-downs can be a little tricky because the drop-down elements are re-parented before they are displayed, and become direct children of the document body rather than of the control they belong to. This prevents standard CSS selectors based on the control to work for drop-down elements.

The dropDownCssClass property makes this task easier. It adds a specified class name to the drop-downs, allowing you to style them with CSS.

In this sample, we defined a "multi-column" CSS rule that uses the CSS Flexbox feature to turn regular lists into multi-column lists. The same CSS is used to style several controls, including a ListBox and the drop-downs used in a ComboBox, MultiSelect, and a FlexGrid.

Note: IE9 does not support the CSS FlexBox feature, so all drop-downs become single-column.

Multi-column ComboBox

In this case, the "multi-column" class was applied to the drop-down rather than to the control. This was done using the control's dropDownCssClass property:

Multi-column MultiSelect

The "multi-column" class was also specified using the control's dropDownCssClass property:

Multi-column FlexGrid

The FlexGrid columns also have a dropDownCssClass property that can be used to style the drop-downs used to edit values in data-mapped columns. To see the multi-column editor in action, click one of the drop-down buttons in the "Fruit" column, or select a cell in that column and press F4:

Multi-column ListBox

There is no drop-down here; the "multi-column" class was added directly to the control's host element: