Search code examples
cssgwtcomboboxwidthhidden

GWT ComboBox element data is cuts off when width of combo box is small


I am using GWT Combo Box widget. I faced an issue of hiding text of combox box if its width is smaller than the text length.

Combox Image

As this image shows, last element text is hide due to smaller width of combo box. So I want to show full text even in multiple line. How can I achieve this task ?


Solution

  • Actually, the problem is in the x-combo-list-item css class of standard GWT-ext ext-all.css file; there is a white-space: nowrap line here. To make items inside the combobox multiline, you've to override this style, setting white-space: normal. The first way to do it that came into my head is to use this example: http://gwt-ext.com/demo/#styledComboBox. Here you can see an HTML template that you can use to build item of combobox. For example, you can use this template, if it suites your needs:

    <div class=\"x-combo-list-item\" style=\"white-space: normal\">" + "{name}</div>"