I have a scenario in which the data that the dropdown has many letters, so my first action was setting the width of the dropdown to 250px.

After this, I realized that when the dropdown displays, appears a horizontal scrollbar on the browser.

So I try to change the position of the dropdown. I tried this code:

var data = [{name:"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},{name:"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"},{name:"ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"}]; $("#combo").igCombo({ dataSource:data, textKey:"name", valueKey:"name", width:"200px", dropDownWidth:"350px", dropDownOpened: function (evt, ui) { var container = $(ui.list[0]); var containerWidth = $(container).width(); var comboWidth = $($($(ui.owner.element[0]).parent()).parent()).width(); var dropDownLeft = comboWidth - containerWidth; $(ui.list[0]).css("left",dropDownLeft); } });

But when the dropdown opens, move to the new position and then go back to the initial position. I prepared a sample on jsfiddle

I think I am missing something to preserve the position.

To understand what I want to achieve.

This is the dropdown when opens: 

This is what I want to achieve:

Best Regards