Hi, I have a page where the text values of the igCombo are significantly longer than the width of the control. In this case, in some browsers, after selecting a text value, the end of the text is visible.

Customer requirement is to display the beginning of the text if it is longer than the control (as it is currently the case when the dropdown list is open). How could this be achieved that works on all major browsers?

I attach an example, showing two igCombo's side by side.

Actual behavior: When selecting a value from the first combo, the end of the text is visible in that combo.

Expected behavior: When selecting a value from the first combo, the beginning of the text should be visible in that combo. The best would be ig this happened right after selection, but it may be acceptable if it is shown on focus lost (i.e. clicking at the second combo for example).

We were experimenting with something like:

var $el = $('.ui-igcombo-field', '#combo1');
var range = $el.get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', 0);
range.moveStart('character', 0);
range.select();

This fixes the issue on Chrome and Firefox, but causes a problem in IE, it positions the cursor to the beginning after typing a character, so, trying to use type-ahead search and trying to type "abc" writes "cba" so it's like typing backwards.

So, do you have any better workaround for this issue?

regards,

Peter