作成日: 2016/06/16 最終更新日: 2016/09/14
文書種別
不具合
状況
修正済み
詳細
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コントロールの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';
}
}
}
----------------------------------
旧文書番号
81679