it-swarm.com.ru

Twitter Bootstrap модальный толкает HTML-контент влево

Если я открываю модальное диалоговое окно через Twitter Bootstrap, я замечаю, что оно немного сдвигает все html-содержимое страницы (т.е. в container) влево, а затем возвращает его в нормальное состояние после закрытия самого себя. Однако это происходит только в том случае, если ширина браузера достаточно велика, чтобы не отвечать на «мобильный» (т. Е. Наименьший) медиазапрос. Это происходит с последними версиями FF и Chrome (не проверял другие браузеры).

Вы можете увидеть проблему здесь: http://jsfiddle.net/jxX6A/2/

Примечание. Необходимо увеличить ширину окна «Результат», чтобы оно переключалось на «медленный» или «большой» медиа-запрос css.

Я настроил HTML страницы на основе примеров, показанных на сайте Bootstrap:

<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

47
EleventyOne

Для начальной загрузки 3.x.x.

Я нашел решение, которое работает с 100% CSS и без JavaScript.

Хитрость заключается в том, чтобы показать полосу прокрутки для модального поверх полосы прокрутки 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 м
  • IE 11 в режиме браузера 8, 9, 10, Edge (рабочий стол)
  • IE 11 в режиме браузера 8, 9, 10, Edge (Windows Phone)

Одна новая небольшая проблема, которую я мог найти с IE:

IE имеет фоновую (= body) прокрутку с помощью колесика мыши, если больше ничего не нужно прокручивать на переднем плане.

Забота о position:fixed!

Из-за характера этого обходного пути вам необходимо уделить особое внимание фиксированным элементам . Например, для отступа "navbar fixed" должно быть задано значение html, а не body (как это описано в 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;
}

альтернатива с оберткой

Если вам не нравится устанавливать overflow:hidden на html (некоторые люди не хотят этого, но он работает, действителен и соответствует стандартам 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/

Обновление:

Проблемы в Bootstrap:

Обновление 2: к вашему сведению

В Bootstrap 3.2.0 они добавляют обходной путь к modal.js, который пытается обрабатывать проблемы с Javascript для каждого вызова modal.prototype.show(), Modal.prototype.hide() и Modal.prototype.resize(). Они добавляют 7 (!) Новых методов для этого. Сейчас ок. 20% кода из modal.js только пытаются решить эти проблемы.

39
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

Вот исправление, предложенное пользователем yshing которое действительно FIXED, для меня при использовании Bootstrap v3.1.1 и Google Chrome 35.0.1916.114m. Исправление взято из GitHub ветки проблемы относительно этого вопроса:

.modal
{
    overflow-y: auto;
}

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

Исправление будет применено только в Bootstrap 3.2 как описано в mdo .

4
Leniel Maccaferri

Вы просто редактируете .modal-open class class форму bootstrap.min.css файла, я думаю, что все будет в порядке .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

Со времени начальной загрузки 3.3.6 многое изменилось, поэтому приведенных выше решений может быть недостаточно.

Чтобы решить эту проблему, посмотрите на функцию setScrollbar в bootstrap.js (или, конечно же, на bootstrap-min.js), вы сразу заметите, что bootstrap добавляет padding-right к элементу body, устанавливая его значение в отработанное значение scrollbarWidth plus существующий отступ - прямо на теле (или 0, если нет).

Если вы прокомментируете ниже

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

В вашем css переопределите начальный класс начальной загрузки с помощью следующего

.modal-open{
  overflow:inherit;
 }

Люди предложили overflow-y: scroll;, проблема в том, что ваш контент сдвигается, если полоса прокрутки не существует в первую очередь.

NBВ соответствии с http://getbootstrap.com/javascript/#modals , всегда старайтесь размещать модальный HTML-код в позиции верхнего уровня в вашем документе

2
pmanOnu

Просто сделай это просто и все

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

Работает для меня. Коротко и делает свою работу.

1
Joshua

Никакое решение здесь не решило мою проблему. Но после Css я получил от Github работал на меня.

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

У меня та же проблема, и я получил решение, которое работает для меня ....

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

поместите этот код в начало вашего файла style.css

1
Anakbhai Gida

Нашел этот ответ в TB вопросах 

просто добавив это ниже CSS, что небольшое движение будет исправлено

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

Кредиты для https://github.com/tvararu

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.

ОБНОВЛЕНИЕ: Решена проблема с фиксированным позиционированием навигационной панели на iOS.

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 был установлен в положение: исправлено, и это было причиной по любой причине. Так что в моем случае исправление было аналогичным, но я установил значение позиции по умолчанию, как показано ниже:

.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