Using the Column Width Configuration Option of the Table with Typeahead Combo Boxes

Follow

Problem

The Typeahead mode of the Combo Box may cause the control to take up excessive space on the Table. This is most noticeable when placeholder text or selected item text is longer than the allotted space in the column. In this case, rather than truncating the displayed value, the column expands. The Column Widths configuration option of the Table is not compatible with long values of the Typeahead Combo Box.

ProblemLength.png

Workaround

CSS can be used to set a fixed-width for the Combo Box even while the other table columns are defined by percentages.

Give a custom class to the Combo Box on the Table so that it is correctly targeted. E.G. fixTextOverflow

CustomClass.png

Use the following code to set an appropriate fixed pixel width for your Combo Box. The exact size will depend on your use case. Take into account the length of placeholder text as well as list item text in relation to the approximate desired size of the column.

.fixTextOverflow .select2-selection__rendered {
max-width: 200px;
}

Result:

CSSWorkaround.png

As can be seen, the text will truncate with ellipses by default when the display is set to a size smaller than the placeholder. The same is true for long selected values.

Limitations

Using both relative column widths (%) and fixed widths will have mixed results with regard to responsive sizing. While the relatively sized columns will resize, the Combo Box with an explicit max-width will not so it is important to take this into account when choosing a specific max-width value for the Combo Box's column.

Have more questions? Submit a request

Comments

Powered by Zendesk