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

文書番号 : 81679     文書種別 : 既知の問題     登録日 : 2016/06/16     最終更新日 : 2016/09/14
文書を印刷する
対象製品
Wijmo 5
ステータス
修正済み
詳細
Bootstrapのmodal内にドロップダウンリストやカレンダーなどを表示するInputコントロール(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';
    }
  }
}
----------------------------------
キーワード
Input