Ignite UI: Changing the position of the dropdown on IgCombo

Question

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:

Special note: I need it working on Internet Explorer, So the answer on infragistics forum does not apply. Best Regards