Bootstrap, вызов модального окна - появляется отступ у body

[Светлана Г.]

Здравствуйте!

 

Верстаю сайт.

 

Настраиваю вывод модального окна при клике на кнопку "Мой кабинет". 

Обнаружилась такая вещь: после появления модального окна у body появляется отступ. Вроде бы не такая уж и проблема, но хотелось бы найти причину.

Исходники Bootstrap скачаны здесь: http://getbootstrap.com/

 

Кстати, для эксперимента, поставила в один из файлов шаблона исходников это же  модальное окно - такая же проблема.

Хотя на самом сайте в примерах такого нет.

 

Надеюсь на помощь специалистов, которых здесь немало .

 

 

 

Edited December 20, 2014 by Светлана Г.

[Sergik+]

Странно я не вижу отступа.

[Jey Val Star]

Да, отступ есть, но у меня в виде этого отступа скролл справа. Который и занимает эти 17px.

[Светлана Г.]

  On 12/20/2014 at 5:43 PM, Jey Val Star said:

Да, отступ есть, но у меня в виде этого отступа скролл справа. Который и занимает эти 17px.

Скриншот из базового примера http://getbootstrap.com/javascript/#modals после удаления контента, чтобы не было прокрутки:

 

[Jey Val Star]

То же самое - отступ в 17px. Но из-за правого меню с position:fixed и белым фоном - его не заметно))

А так забейте, или пропишите для body в CSS padding-right:0px !important;

[Z1gnet]

ну как вариант всегда добавить скролл в модальное окно http://take.ms/ayugs

[npofopr]

Нет отступа, или исправили?

[Светлана Г.]

  On 12/21/2014 at 7:11 AM, npofopr said:

Нет отступа, или исправили?

Нет, не исправляла. Отступ по-прежнему остается.

Edited December 21, 2014 by Светлана Г.

[klierik]

Всё нормально. Отступ будет, так как за ранее предполагается что высота модального окна может быть больше чем высота виевпорта.

И из-за того что в настройках системы у тебя установлено, скорее всего: http://take.ms/vO7f6

То ожидаемый скролл появится только при прокрутке.

CSS не умеет вычислять на какой OS он запущен, по этому данное решение считается наиболее универсальным, хоть и не идеальным.

[Светлана Г.]

  On 12/21/2014 at 8:40 AM, klierik said:

Всё нормально. Отступ будет, так как за ранее предполагается что высота модального окна может быть больше чем высота виевпорта.

И из-за того что в настройках системы у тебя установлено, скорее всего: http://take.ms/vO7f6

То ожидаемый скролл появится только при прокрутке.

CSS не умеет вычислять на какой OS он запущен, по этому данное решение считается наиболее универсальным, хоть и не идеальным.

Но в одном и том же браузере в моем случае есть отступ, а на сайте Bootstrap в их примере - нет. Как влияют настройки? Они одни и те же.

[klierik]

я не заметил различий в Chrome mac. Но стоит обратить внимание на DOM когда показан модал: http://take.ms/Et4Xw

[Светлана Г.]

  On 12/21/2014 at 11:07 AM, klierik said:

я не заметил различий в Chrome mac. Но стоит обратить внимание на DOM когда показан модал: http://take.ms/Et4Xw

Отступ разный. У меня 17px.

[klierik]

  On 12/21/2014 at 12:22 PM, Светлана Г. said:

Отступ разный. У меня 17px.

 

потому что ширина скролл-бара в разных браузерах разная.

[Светлана Г.]

  On 12/21/2014 at 1:31 PM, klierik said:

 

  On 12/21/2014 at 12:22 PM, Светлана Г. said:

Отступ разный. У меня 17px.

 

потому что ширина скролл-бара в разных браузерах разная.

 

Да-да, я знаю.

[Светлана Г.]

Вот еще выявился косяк в Safari 5.1.7: при первичном фокусе в поле ввода в модальном окне само модальное окно сдвигается влево. Не косяки ли самого Bootstrap?

 

С jQuery не было никаких проблем вообще.

[klierik]

Сейчас Safari 8. Поддерживать 5ю версию -- это же старьё

[Светлана Г.]

  On 12/24/2014 at 3:59 PM, klierik said:

Сейчас Safari 8. Поддерживать 5ю версию -- это же старьё

У меня такая стоит на W8. Попробую обновиться.

Похоже, не получится.

[npofopr]

W8 это что? Windows 8? или WinPhone8?

пользоваться на винде Сафари вообще извращенство. И оно тут не обновится никогда. 5.7 вроде под винду последняя версия.

[klierik]

Под Windows Apple заморозила поддержку Safari несколько лет назад. Поддерживать софт которые даже разработчик не поддерживает -- избыточно

[Светлана Г.]

@npofopr,

 

Windows 8 

[Great Rash]

Светлана Г., вы ещё забыли проверить в Opera 12 и Internet Explorer 6

[Светлана Г.]

Заменила скрипт Bootstrap на jQuery dialog. Теперь подобных проблем нет. Только пришлось поднастроить размеры окошка для различных разрешений.

  On 12/25/2014 at 8:55 AM, Great Rash said:

Светлана Г., вы ещё забыли проверить в Opera 12 и Internet Explorer 6

Это не про меня.

[Great Rash]

  On 12/25/2014 at 9:11 AM, Светлана Г. said:

Это не про меня.

Safari на винде просто из той же серии... 

[Светлана Г.]

Проблему я все-таки решила. Вот эти 2 последние строчки (тени) и провоцировали сдвиг модального окна в Safari:

.form-control:focus {  outline: 0;  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}

Edited January 9, 2015 by Светлана Г.