it-swarm.com.de

Twitter Bootstrap Modal drückt HTML-Inhalte nach links

Wenn ich über Twitter Bootstrap einen modalen Dialog öffne, ist mir aufgefallen, dass der gesamte HTML-Inhalt der Seite (d. H. In der Variablen container) ein wenig nach links verschoben wird. Nach dem Schließen wird er wieder normal. Dies geschieht jedoch nur, wenn die Browserbreite groß genug ist, um sich nicht auf der "mobilen" (d. H. Kleinsten) Medienabfrage zu befinden. Dies tritt bei den neuesten Versionen von FF und Chrome auf (andere Browser wurden nicht getestet).

Sie können das Problem hier sehen: http://jsfiddle.net/jxX6A/2/

Hinweis: Sie müssen die Breite des Fensters "Ergebnis" vergrößern, damit auf die Medienabfrage "med" oder "large" umgestellt wird.}

Ich habe den HTML-Code der Seite anhand der Beispiele auf der Bootstrap-Site eingerichtet:

<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>

Ich vermute, das sollte nicht passieren, aber ich bin mir nicht sicher, was ich falsch gemacht habe.

EDIT: Dies ist ein bekannter Fehler. Weitere (und aktuelle) Informationen finden Sie unter: https://github.com/twbs/bootstrap/issues/9855

47
EleventyOne

Für Bootstrap 3.x.x.

Ich habe eine Lösung gefunden, die mit 100% CSS und keinem JavaScript funktioniert.

Der Trick ist, zeigen Sie die Bildlaufleiste für Modal über die Bildlaufleiste von HTML-Inhalt.

CSS:

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

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

hier ist ein Online-Beispiel: http://jsbin.com/oHiPIJi/43/

Ich teste es unter Windows 7 mit:

  • FireFox 27.0
  • Chrome 32.0.1700.107 m
  • IE 11 im Browsermodus 8, 9, 10, Edge (Desktop)
  • IE 11 im Browsermodus 8, 9, 10, Edge (Windows Phone)

Ein neues kleines Problem, das ich mit IE finden konnte:

IE hat einen Hintergrund (= Körper) mit dem Mausrad, wenn nicht mehr im Vordergrund zu scrollen ist.

Sorge um position:fixed!

Aufgrund der Natur dieser Problemumgehung müssen Sie für fixe Elemente besondere Vorsicht walten lassen. Zum Beispiel muss die Auffüllung für "navbar fixed" auf html und nicht auf body gesetzt werden (wie es beschrieben wird im Bootstrap-Dokument ).

/* 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;
}

Alternative mit Wrapper

Wenn Sie overflow:hidden nicht auf html setzen möchten (einige Leute möchten dies nicht, aber es funktioniert, ist gültig und 100% standardkonform), können Sie den Inhalt von body in ein zusätzliches div einschließen.

Da Sie für fixe Elemente keine besondere Pflege benötigen, können Sie sie wie zuvor verwenden.

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

hier ist ein Beispiel: http://jsbin.com/oHiPIJi/47/

Update:

Probleme in Bootstrap:

Update 2: zu Ihrer Information

In Bootstrap 3.2.0 wird eine Problemumgehung für modal.js hinzugefügt, die versucht, die Probleme mit Javascript für jeden Aufruf von modal.prototype.show(), Modal.prototype.hide() und Modal.prototype.resize() zu lösen. Dazu kommen 7 (!) Neue Methoden hinzu. Jetzt ca. 20% des Codes von modal.js versuchen nur, diese Probleme zu lösen.

39
TLindig

Versuche dies:

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

Es wird tatsächlich durch die folgende Regel in bootstrap.css verursacht:

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

Ich bin nicht ganz sicher, warum es sich so verhält (vielleicht, um die Bildlaufleiste irgendwie zu berücksichtigen), aber Sie können das Verhalten folgendermaßen ändern:

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

BEARBEITEN: Eigentlich handelt es sich um ein in Bootstrap gemeldetes Problem: https://github.com/twbs/bootstrap/issues/9855

14
clime

Wenn sich das Modell öffnet, ist eine Polsterung von 17 Pixeln rechts vom Körper vorhanden. Der folgende Code sollte dieses Problem beheben. 

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

Hier ist der Fix, den user yshing that wirklich FIXED für mich vorgeschlagen hat, während ich Bootstrap v3.1.1 und Google Chrome 35.0.1916.114m verwende. Das Update stammt aus einem GitHub Issue-Thread in dieser Angelegenheit:

.modal
{
    overflow-y: auto;
}

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

Das Update landet nur in Bootstrap 3.2 wie von mdo beschrieben.

4

Sie bearbeiten einfach die Datei .modal-open class aus der Datei bootstrap.min.css. Ich denke, es wird in Ordnung sein .modal-open{overflow:auto}

Der Überlauf: versteckt ist dort eingestellt, Sie haben nur den Überlauf: auto eingestellt.

3
altaf

ich habe dasselbe Problem und folgende Lösung angetroffen

.modal-open {
    overflow: visible;
}

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

Um zu verhindern, dass die Seite in ähnlichen Fällen verschoben wird - beispielsweise eine Akkordeon-Öffnung, die über den unteren Rand der Seite hinausgeht - füge ich Folgendes in CSS hinzu:

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

Der overflow-y: scroll bewirkt, dass die Bildlaufleiste immer angezeigt wird. Um ehrlich zu sein, kann ich mich nicht erinnern, warum ich dort height:100% eingepasst habe ... aber Sie scheinen es nicht für dieses Problem zu benötigen.

Demo: http://jsfiddle.net/jxX6A/8/

Es gibt noch eine kleine Bewegung. Dies scheint jedoch auf Bootstraps eigener Beispielseite vorhanden zu sein: http://getbootstrap.com/javascript/#modals

Ich vermute, Sie bleiben dabei ... aber es ist immer noch viel besser als das, was Sie anfangs gesehen haben.

EDIT: Ich könnte mir Sorgen machen, dass das Hinzufügen dieser Stile andere Bootstrap-Sachen stören könnte, da ich es selbst nicht verwendet habe. Vielleicht möchten Sie das noch einmal überprüfen.

3

Seit dem Bootstrap 3.3.6 hat sich einiges geändert, so dass die obigen Lösungen möglicherweise nicht ausreichen.

Um dies zu lösen, sehen Sie sich die setScrollbar-Funktion in bootstrap.js (oder natürlich bootstrap-min.js) an. Sie werden sofort feststellen, dass bootstrap dem body-Element padding-right hinzufügt Vorhandene Polsterung rechts am Körper (oder 0, falls nicht).

Wenn Sie das unten auskommentieren

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

Überschreiben Sie in Ihrer CSS-Klasse die Bootstrap-Klasse "Modal-Open" mit der folgenden Angabe

.modal-open{
  overflow:inherit;
 }

Die Leute haben overflow-y: scroll; vorgeschlagen. Das Problem dabei ist, dass sich der Inhalt verschiebt, wenn die Bildlaufleiste überhaupt nicht vorhanden ist.

NBAls Per http://getbootstrap.com/javascript/#modals versuchen Sie immer, den HTML-Code eines Modals an oberster Stelle in Ihrem Dokument abzulegen

2
pmanOnu

Mach das einfach und das ist alles

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

Funktioniert bei mir. Kurz und erledigt die Arbeit.

1
Joshua

Keine Lösung hier hat mein Problem behoben. Aber nach Css habe ich von Github für mich gearbeitet.

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

Ich habe das gleiche Problem und habe eine Lösung bekommen, die für mich Arbeit ist.

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

platzieren Sie diesen Code oben in Ihrer style.css-Datei

1
Anakbhai Gida

Diese Antwort wurde in TB Ausgaben gefunden 

durch das Hinzufügen unter css wird diese kleine Bewegung behoben

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

Kredite an https://github.com/tvararu

1
Venkata Tata

Ich benutze Bootstrap v3.3.4 und sehe dieses Problem. Ich habe verstanden, dass Bootstrap-Modal 17px-Padding direkt zum Körper hinzufügt. Verwenden Sie einfach folgenden Code:

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

Fügen Sie einfach eine Klasse hinzu 

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

es hat für mich funktioniert 

0
Zinnira Munir

Ich mochte keine der angebotenen Lösungen wirklich und verwendete eine Kombination davon (zusammen mit einem Fix, den ich zuvor für qTip-Modals hatte), um etwas zu finden, das am besten für Bootstrap v3.3.7 geeignet war.

UPDATE: Problem mit fester Navbar-Positionierung unter iOS behoben.

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

Dadurch kann der Hintergrund "fixiert" werden, die Bildmodule können jedoch noch scrollbar sein, das Problem der doppelten Bildlaufleiste und die Neupositionierung der festen Navigationsleiste werden behoben.

Beachten Sie, dass dort auch zusätzlicher Code vorhanden ist, um sich an die Position des Scrollens zu erinnern (und dorthin zurückzukehren), wenn der Modal geschlossen ist.

Ich hoffe, das hilft allen anderen, die nach meinen Vorstellungen suchen. 

0
ouija

Dies ist ein gemeldeter Fehler bei bootstrap: https://github.com/twbs/bootstrap/issues/9855

Und dies ist meine vorübergehende schnelle Lösung und es funktioniert mit fester oberer Navigationsleiste, nur mit Javascript. Laden Sie dieses Skript zusammen mit Ihrer Seite.

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

Hier ist das Arbeitsbeispiel: http://jsbin.com/oHiPIJi/64

0
Agni Pradharma

Versuchen Sie, alle Vorkommen von unten zu ändern 

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

mit

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

in Ihrer bootstrap.js-Datei.

Das ist alles..

0
Matricore

Für alle, die immer noch Probleme haben - die neueste Version von Bootstrap enthält ein natives Update. Aktualisieren Sie einfach die Dateien bootstrap.min.css und bootstrap.min.js von der neuesten Version.

http://getbootstrap.com/

0
Dan Canetti

ich hatte das gleiche Problem und folgende Lösung funktioniert für mich

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

Es stellte sich also heraus, dass ich tatsächlich einen rechten Rand von 250px hatte. Mein Problem schien zu sein, dass .modal-open auf Position gebracht wurde: behoben, und das war aus irgendeinem Grund die Ursache. In meinem Fall war der Fix ähnlich, aber ich setzte den Positionswert wie folgt auf den Standardwert:

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

Ich habe mein Problem behoben und denke, es wird für alle funktionieren. In bootstrap.js gibt es eine Zeile:

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

In einigen Fällen bedeutet dies, dass Bootstrap beim Öffnen eines Modals ein Auffüllen der Bildlaufleistenbreite nach rechts hinzufügt. @PmanOnu war also auf halbem Weg richtig, aber löschen Sie nicht die gesamte Codezeile, sondern nur

ersetze bodyPad + this.scrollbarWidth in bootstrap.js mit 0

to make Bootstrap fügt ein Auffüllrecht von 0px hinzu (was das gleiche ist, als würde man nichts hinzufügen).

Dann füge hinzu .modal-open {overflow: initial;} zu Ihrem benutzerdefinierten CSS, um zu verhindern, dass Bootstrap beim Öffnen von Modals die Bildlaufleiste deaktiviert.

0
HF Z

Wenn alle oben genannten Lösungen nicht funktionieren, kann dies an der Positionierung des Inhalts liegen. Sehen Sie sich einfach die Position des Modals an 

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