jquery - Ignite UI: IgCombo でのドロップダウンの位置の変更

Question

ドロップダウンに多くの文字が含まれるデータのシナリオがあるため、最初のアクションはドロップダウンの幅を 250px に設定することでした。

この後、ドロップダウンが表示されると、ブラウザに水平スクロールバーが表示されることに気付きました。

だから私はドロップダウンの位置を変更しようとします。私はこのコードを試しました：

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);
    }
  });

ただし、ドロップダウンが開いたら、新しい位置に移動してから、最初の位置に戻ります。jsfiddleでサンプルを用意しました

ポジションを維持するために何かが欠けていると思います。

自分が達成したいことを理解するために。

これは、開いたときのドロップダウンです。

これは私が達成したいことです:

特記事項: Internet Explorer で動作する必要があるため、インフラジスティックス フォーラムの回答は適用されません。よろしくお願いします