How cound we display the whole content when the text is too long in dropdown list of igCombo

210

Jeffrey Chen posted over 12 years ago

Hi there,

How could we display the whole content when the text is too long in dropdown list of igCombo?

See the figure below:

Top Replies

23953

Offline Martin Pavlov posted over 12 years ago in reply to Jeffrey Chen +1 verified
Hi Jeffrey, Try with these CSS rules. Code Snippet < style > .ui-igcombo-list { overflow-y : auto!important ; } .ui-igcombo...view reply »

210

Jeffrey Chen posted over 12 years ago in reply to Martin Pavlov

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).
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 12 years ago in reply to Tom Sprows
Hi Peter,

You can achieve this by using igCombo.itemTemplate option. The idea is to wrap the text into SPAN element and use its title attribute to enable tooltips.

Here is an example code:

Code Snippet

$.ig.loader(function () {

    $("#combo").igCombo({

        valueKey: "Name",

        textKey: "Name",

        width: "100px",

        itemTemplate: "<span title=\"${Name}\">${Name}</span>",

        dataSource: adventureWorks

    });

});

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel
175

Offline Tom Sprows posted over 12 years ago in reply to Martin Pavlov

Hi Martin,

Can we show tooltip on hovering over any combo box list item?

Regards.
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 12 years ago
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.):

Code Snippet

<style>

    .ui-igcombo-list ul > li

    {

        white-space: normal!important;

        border-bottom: 1px solid black!important;

    }

</style>

Best regards,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel