web-dev-qa-db-ja.com

Twitter BootstrapモーダルはHTMLコンテンツを左にプッシュします

モーダルダイアログをTwitter Bootstrapで開くと、ページのすべてのhtmlコンテンツ（つまり、container）が少し左にプッシュされ、その後に戻されることに気付きました。自身を閉じた後は正常です。ただし、これは、ブラウザの幅が「モバイル」（つまり最小の）メディアクエリに含まれないほど大きい場合にのみ発生します。これは、FFの最新バージョンとChrome（他のブラウザーをテストしていない）で発生します。

ここで問題を確認できます： http://jsfiddle.net/jxX6A/2/

注：「結果」ウィンドウの幅を広げて、「med」または「large」メディアクエリcssに切り替える必要があります。

Bootstrapのサイトに示されている例に基づいて、ページのHTMLをセットアップしました。

<div class='container'>
    <div class='page-header'>
        <h4>My Heading</h4>
    </div>
    <div id='content'>
        This is some content.
    </div>
    <div class='footer'>
        <p>&copy; 2013, me</p>
    </div>
</div>

私はこれが起こるはずがないと推測していますが、私が間違ったことをしたかどうかはわかりません。

EDIT：これは既知のバグです。詳細な（および最新の）情報については、以下を参照してください： https：// github .com/twbs/bootstrap/issues/9855

jquerycsstwitter-bootstrapmodal-dialogbootstrap-modal
47
EleventyOne

bootstrap= 3.x.x.

私は、100％CSSで動作し、JavaScriptを使用しないソリューションを見つけました。

秘isは、HTMLコンテンツのスクロールバーの上にモーダルのスクロールバーを表示することです。

CSS：

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

オンラインの例を次に示します。 http://jsbin.com/oHiPIJi/43/

私はそれをWindows 7でテストします：

  • FireFox 27.0
  • クロム32.0.1700.107 m
  • ブラウザモード8、9、10、Edge（デスクトップ）のIE 11
  • ブラウザモード8、9、10、EdgeのIE 11（Windows Phone）

IEで見つけられる新しい小さな問題：

IEは、フォアグラウンドでスクロールするものがもうない場合、マウスホイールでバックグラウンド（= body）スクロールします。

position:fixed！についての注意

この回避策の性質上、固定要素には特別な注意が必要です。たとえば、「navbar fixed」のパディングは、htmlではなくbodyに設定する必要があります（その記述方法 in bootstrap doc =）。

/* only for fixed navbar: 
* extra padding stetting not on "body" (like it is described in doc), 
* but on "html" element
* the used value depends on the height of your navbar
*/
html {
  padding-top: 50px;
  padding-bottom: 50px;
}

ラッパーを使用した代替

htmlにoverflow:hiddenを設定するのが気に入らない場合（これを望まない人もいますが、有効であり、100％標準に準拠しています）、bodyのコンテンツをラップできます。追加のdivで。

固定要素に特別な注意を払う必要はないので、以前のように使用できます。

body, html {
  height: 100%;
}
.bodywrapper {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

/* extra stetting for fixed navbar, see bs3 doc
*/
body {
  padding-top: 50px;
  padding-bottom: 50px;
}

以下に例を示します。 http://jsbin.com/oHiPIJi/47/

更新：

ブートストラップの問題：

更新2：FYI

Bootstrap 3.2.0）では、modal.jsに回避策を追加し、modal.prototype.show()、Modal.prototype.hide()、およびModal.prototype.resize()の呼び出しごとにJavascriptの問題を処理しようとします。 modal.jsのコードの約20％は、その問題の処理のみを試みます。

41
TLindig

これを試して：

body.modal-open {
    overflow: auto;
}
body.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
    /* reference: http://stackoverflow.com/a/26500272/2259400 */
}
38
Jimmy Ilenloa

実際には、bootstrap.cssの次のルールが原因です。

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: 15px;
}

私はなぜそれがそのように振る舞うのか正確にはわかりません（おそらくスクロールバーを何らかの理由で説明するためです）が、これで振る舞いを変えることができます：

body.modal-open {margin-right: 0px}

編集：実際、これはブートストラップで報告された問題です。 https://github.com/twbs/bootstrap/issues/9855

14
clime

モデルが開くと、ボディの右側に17pxのパディングがあります。以下のコードはその問題を解決するはずです。

body {
padding-right: 0px !important;
}
6
Jeacovy Gayle

ser yshing that that really[〜＃〜] fixed [〜＃〜]Bootstrap v3.1.1とGoogle Chrome 35.0.1916.114m。この問題に関する修正はGitHub issue thread に由来します。

.modal
{
    overflow-y: auto;
}

.modal-open
{
   overflow:auto;
   overflow-x:hidden;
}

修正は、Bootstrap 3.2 mdoによるデスブリとして 。

4
Leniel Maccaferri

Bootstrap.min.cssファイルの.modal-openクラスを編集するだけで、大丈夫です.modal-open{overflow:auto}

Over-flow：hiddenが設定されているので、単にover-flow：autoを設定します。

3
altaf

私は同じ問題と次の解決策に直面しました

.modal-open {
    overflow: visible;
}

.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
3
Vinay Pandya

同様のインスタンスでページが移動しないようにするには（たとえば、ページの下部を通過するアコーディオンの開口部）、これをCSSに追加します。

body {
    overflow-y: scroll;
    height: 100%;
}

overflow-y: scrollは、スクロールバーを常に表示させます。正直言って、なぜheight:100%そこに...しかし、あなたはこの問題のためにそれを必要としないようです。

デモ： http://jsfiddle.net/jxX6A/8/

まだ少し動きがあります。しかし、それはBootstrap自身のサンプルページに存在するようです： http://getbootstrap.com/javascript/#modals

だから私はあなたがそれで立ち往生していると推測しています...しかし、それはあなたが最初に見ていたものよりもはるかに優れています。

EDIT：これらのスタイルを追加すると、他のBootstrapなど、使用していないものと干渉する可能性がありますそれは自分自身なので、あなたはそれを再確認したいかもしれません。

3
a.real.human.being

bootstrap 3.3.6以降、多くの変更が加えられたため、上記の解決策では不十分な場合があります。

これを解決するには、bootstrap.js（またはもちろんbootstrap-min.js）のsetScrollbar関数を見てください。bootstrapがbody要素にpadding-rightを追加し、その値をワークアウトに設定していることがすぐにわかります。 scrollbarWidthの値に、本体の既存のpadding-rightを加えた値（そうでない場合は0）。

以下をコメントアウトした場合

//this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

あなたのcssでは、以下でbootstrapモーダルオープンクラスをオーバーライドします

.modal-open{
  overflow:inherit;
 }

人々はoverflow-y: scroll;を提案しました。これに関する問題は、スクロールバーがそもそも存在しない場合、コンテンツがシフトすることです。

NB http://getbootstrap.com/javascript/#modals に従って、常にドキュメントの最上位にモーダルのHTMLコードを配置してください

2
pmanOnu

これを簡単にやればいい

.modal-open {
padding-right: 0 !important;
}

私のために働く。短くて仕事をします。

1
Joshua

ここで解決した問題はありません。しかし、Githubから取得したCssをフォローしてくれました。

body.modal-open {
padding-right: 0px !important;
overflow-y: auto;
}
1
Manjay_TBAG

私は同じ問題を抱えており、私のために働く解決策を得ました....

body .modal-open {
  padding-right: 0% !important;
  overflow-y: auto;
}

このコードをstyle.cssファイルの先頭に配置します

1
Anakbhai Gida

この答えはTB issues

これをCSSの下に追加するだけで、小さな動きが修正されます

body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

https://github.com/tvarar へのクレジット

1
Venkata Tata

Bootstrap v3.3.4を使用してこの問題を確認し、Bootstrap=モーダルは本体に17pxのパディングを追加するので、単に次のコードを使用します。

body {
    padding-right: 0 !important;
}
1
Milad

クラスを追加するだけです

.modal-open{ padding-right:0px !important;}

それは私のために働いた

0
Zinnira Munir

私は本当に提供されたソリューションがどれも好きではなかったので、それらを組み合わせて（以前にqTipモーダル用に修正した）、Bootstrap = v3.3.7。

PDATE： iOSで修正されたnavbarの配置に関する問題を解決しました。

CSS：

/* fix issue with scrollbars and navbar fixed movement issue with bootstrap modals */
html {
    overflow-y: scroll !important;
}

html.noscroll {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
}

.modal-open .modal {
    padding-right: 0 !important;
}

.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
}
/* end modal fix */

JavaScript：

/* fix for modal overlay scrollbar issue */
$(document).ready(function() {
    var curScrollTop;
    var prevScrollTop;
    $('.modal').on('show.bs.modal', function() {
        curScrollTop = $(window).scrollTop();
        $('html').addClass('noscroll').css('top', '-' + curScrollTop + 'px');
        $('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop});     
        $(window).on("resize", function() {             
            var bodyH = $("body").height();
            var winH = $(window).height();
            if (winH > bodyH) {
                prevScrollTop = curScrollTop;
                curScrollTop = 0;
                $('.navbar-fixed-top').css({'position':'absolute','top':'0'}); 
            }
            else {
                $('html').removeClass("noscroll");
                if (curScrollTop == 0) window.scrollTo(0, prevScrollTop);
                else window.scrollTo(0, curScrollTop);
                curScrollTop = $(window).scrollTop(); 
                $('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop});  
                $('html').addClass("noscroll");
            }
            $('html').css('top', '-' + curScrollTop + 'px');
        })
    })
    $('.modal').on('hide.bs.modal', function() {
        $('html').removeClass("noscroll");
         $('.navbar-fixed-top').css({'position':'fixed','top':'0'});
        window.scrollTo(0, curScrollTop);
        $(window).off("resize");
    })
})

これにより、背景を「固定」できますが、モーダルをスクロール可能にし、ダブルスクロールバーの問題と固定ナビゲーションバーの再配置の問題を解決します。

モーダルが閉じられたときに「スクロール」位置を記憶する（そしてそこに戻る）ための追加コードもあります。

これが私が望んでいたことを成し遂げようとしている他の誰にも役立つことを願っています。

0
ouija

これは、ブートストラップに報告された問題です： https://github.com/twbs/bootstrap/issues/9855

これは私の一時的な迅速な修正であり、javascriptのみを使用して、上部の固定ナビゲーションバーを使用して動作します。このスクリプトをページとともにロードします。

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

これが実際の例です： http://jsbin.com/oHiPIJi/64

0
Agni Pradharma

以下のすべての出現を変更してみてください

$body.css('padding-right',XXX)

と

$body.css('padding-right'0)

bootstrap.jsファイル。

それで全部です..

0
Matricore

まだこれに苦労している人のために-Bootstrapの最新バージョンはネイティブに修正されています。最新バージョンからbootstrap.min.cssおよびbootstrap.min.jsファイルを更新するだけです。

http://getbootstrap.com/

0
Dan Canetti

私は同じ問題に直面しており、次の解決策が私のために働いています

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
0
Vinay Pandya

そのため、実際には250px程度のマージンが得られていました。私の問題は、.modal-openがposition：fixedに設定されることであるように思われ、それが何らかの理由で原因でした。したがって、私の場合、修正は同様でしたが、以下のように位置の値をデフォルトに設定しました。

.modal-open{ position: initial !important;}
0
zorrotmm

私は自分の問題を修正し、それは誰にとってもうまくいくと思います。 bootstrap.jsには次の行があります。

if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

場合によってはBootstrapは、モーダルを開いているときにスクロールバーの幅のパディング右を追加します。したがって、@ pmanOnuは中途半端でしたが、このコード行全体を削除しないでください。

置換bodyPad + this.scrollbarWidth bootstrap.jsで0

Bootstrap 0pxのパディング権を追加します（これは追加しないのと同じです）。

それから加えて .modal-open {overflow: initial;}をカスタムcssに追加して、Bootstrap=モーダルを開いているときにスクロールバーを無効にしないようにします。

0
HF Z

上記のすべてのソリューションが機能しなかった場合は、コンテンツの配置が原因である可能性があります。モーダルの位置を見てください

body.modal-open
{
   padding-right: 0 !important; // not important
   position: relative;
}
0
user6664928