Hi there,
How could we display the whole content when the text is too long in dropdown list of igCombo?
See the figure below:
Hi Jeffrey,
igCombo has white-space: nowrap; CSS rule. In order to override it use these CSS rules (border-bottom rules is not necessary. I put it to make a distinction between combo items.):
Best regards,Martin PavlovInfragistics, Inc.
Hi Matrin,
As I tested, igCombo will take the height of first item as "itemHeight" (the height is fixed for all items).
So for other wrap items, they will only show the first line (see the figure below).
Hello Jeffrey,
You are correct. igCombo explicitly sets each LI element a width and a height. The height of each LI element is the height of the first LI element.
The solution I can think of is to override the height of each LI element with this CSS rule "height: auto!important;"
The whole CSS will look like this:
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Hi Martin,
The css works well, and the item wraps correctly. But new issues comes.
The vertical scroll bar is missing(there are 10 items in datasource, but I can only see 5.5 from the dropdown list).
I guess it is caused by igCombo still using the first item Height to calculate.
Hello Jeffrey,Unfortunately I cannot reproduce this problem. Attached you can find my sample.
Can you share your igCombo configuration and also which version of our jQuery controls you use?
Best regards,
I attached a sample to re-produce this issue.
Try with these CSS rules.
I added an "overflow-y: auto!important;" for the "ui-igcombo-list" class.