[Input] Bootstrapのmodal内にInputコントロールを配置した場合、ドロップダウンやカレンダーなどがコントロールからずれた位置に表示される場合がある

文書番号 : 81679     文書種別 : Bug
登録日 : 2016/06/16     最終更新日 : 2016/09/14

対象製品

Wijmo 5

ステータス

修正済み

詳細

Bootstrapのmodal内にドロップダウンリストやカレンダーなどを表示するInputコントロール(AutoCompleteやInputDateなど)がスクロールする必要のある位置に配置されている場合、ドロップダウンリストやカレンダーなどがコントロールからずれた位置に表示されます。

【再現手順】
1. 「ダイアログの表示」ボタンを押下します。
2. ブラウザをスクロールし、AutoComplete、InputDateを表示します。
3. AutoCompleteまたはInputDateの▼を押下します。
結果:ドロップダウンリストまたはカレンダーがコントロールからずれた位置に表示されます。

サンプル

回避方法

この問題はバージョン5.20162.207で修正されました。
修正版の適用方法については、アップデートの方法を参照してください。

修正版を適用しない場合の回避方法は次の通りです。

下記コードのようにInputコントロールのisDroppedDownChangedイベントを使用し、コントロールのdropDownのstyleのtopプロパティを設定して、ドロップダウンリストやカレンダーの表示位置を調整します。

◆サンプルコード(JavaScript)
----------------------------------
function isDroppedDownChanged(s, e) {
  if (s.isDroppedDown) {
    // 要素の位置を取得する
    var id = s.hostElement.getAttribute('id');
    var element1 = document.getElementById(id);
    var element2 = document.getElementById('myModal');
    var rect = element1.getBoundingClientRect();

    var dropDown = s.dropDown;
    if (element2.offsetHeight < rect.bottom + dropDown.offsetHeight) {
      // コントロールの上に表示
      dropDown.style.top = (rect.top - dropDown.offsetHeight + element2.scrollTop) + 'px';
    }
    else {
      // コントロールの下に表示
      dropDown.style.top = (rect.bottom + element2.scrollTop) + 'px';
    }
  }
}
----------------------------------