Как сделать чтобы модальное окно не сдвигало блок position:fixed?

Question

malayamarisha @malayamarisha

CSS

Как сделать чтобы модальное окно не сдвигало блок position:fixed?

Всем привет.
Реализовано модальное окно с помощью bootstrap.
В стандартном функционале при открытии модального окна элементу body добавляется класс .modal-open, а также убирается полоса прокрутки (чтобы не было возможности прокрутить страницу, пока открыто модальное окно).
Для того, чтобы контент не сдвигался (на ширину полосы прокрутки) добавлен класс

body.modal-open {
    overflow: hidden;
    padding-right: 17px !important;
}

Но есть header, у которого стиль position:fixed и не удается исправить сдвиг header при открытии модального окна.
Подскажите, пожалуйста, как можно при открытии модального окна убрать сдвиг header?

Вопрос задан 28 нояб. 2023
137 просмотров

7 комментариев

Подписаться 1 Простой 7 комментариев

szQocks @szQocks

а какой именно сдвиг ? смотри если у тебя изначально header имеет position: fixed и мы прокрутили страницу на половину и решили открыть модальное окно - в этот момент header как двигался сверху так и будет оставаться сверху, о каком сдвиге ты говоришь - непонятно, точнее опиши проблему

Написано 28 нояб. 2023
szQocks @szQocks

а я понял какой сдвиг, ща подумаю

Написано 28 нояб. 2023
malayamarisha @malayamarisha Автор вопроса

szQocks, спасибо что откликнулись )
При открытии модального окна header сдвигается в сторону (вправо).
И видимо как раз на 17px (ширина полосы прокрутки).
Сдвиг контента удалось скорректировать, а вот сдвиг header не выходит.

Написано 28 нояб. 2023
szQocks @szQocks

malayamarisha, хотя нет, туплю, сдвига не будет, проверил, я думал сдвиг будет наверх. А ты говоришь в право, тут единственный вариант вижу это добавить padding который равен ширину скролла для body и header, во время открытого модального окна, но и лучше этого не делать, пусть прыгает.

Написано 28 нояб. 2023
malayamarisha @malayamarisha Автор вопроса
szQocks, Спасибо огромнейшее за помощь, развернутый ответ, подсказки )
В процессе написания ответа пришла мысль, что не верно получалось добраться до нужного блока.
Есть разметка при открытом модальном окне (body добавляется класс modal-open) :

<body class="body modal-open"> <header class="header fixed-header"> <div class="container-fluid header-container pl-0 pr-0 header--fixed"> <div class="top-menu"></div>  <div class="navbar"></div>  </div> </header> </body>

Рабочий вариант:

body.modal-open>header>.header--fixed { padding-right: 17px !important; }

Были попытки добавить padding-right header-у (ниже одна из многочисленных попыток):

body.modal-open>.header--fixed { padding-right: 17px !important; }

Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
Написано 28 нояб. 2023
szQocks @szQocks

malayamarisha,
Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
да хоть так и хоть так - будет проблема какая-нибудь

я делал проекты с модальными окнами - у меня там прыгал контент вправо при открытии модальных окон - и я считаю это нормой

P.S да и толком я ничем не помог

Написано 28 нояб. 2023
Ankhena @Ankhena Куратор тега CSS

malayamarisha, При нормальной верстке должно быть достаточно селектора .modal-open .header--fixed и без всяких important
Если недостаточно, то смотрите какому селектору вы до этого задавали паддинг и разбирайтесь почему и зачем у него высокая специфичность.

И > это прямые потомки, а вам нужен непрямой, поэтому обычный пробел.

Написано 28 нояб. 2023

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
На сайте наблюдаются лаги в в мобильной версии сайта, в чём проблема?
- 1 подписчик
- 10 часов назад
- 50 просмотров
1

ответ
HTML

+2 ещё

Простой
Как верстать такой блок на flexbox?
- 1 подписчик
- 10 часов назад
- 50 просмотров
0

ответов
JavaScript

+3 ещё

Средний
Вопросик в синем прямоугольнике на мобилках за что отвечает?
- 1 подписчик
- 10 часов назад
- 76 просмотров
1

ответ
HTML

+2 ещё

Простой
Кривое отображение текста HTML, CSS, как исправить?
- 1 подписчик
- 18 часов назад
- 71 просмотр
0

ответов
CSS

Простой
Есть ли какие то нюансы использования в css перенос текста, если не умещается в блок,?
- 2 подписчика
- 23 часа назад
- 82 просмотра
2

ответа
CSS

Простой
CSS градиент анимация, убрать жесткие границы?
- 2 подписчика
- вчера
- 128 просмотров
1

ответ
HTML

+2 ещё

Простой
При заполнении пространства строками текста div блока по высоте как переносить текст вторым столбцом?
- 1 подписчик
- вчера
- 44 просмотра
1

ответ
CSS

+1 ещё

Простой
Как задать высоту строк в CSS Grid Layout в зависимости от наличия контента?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
CSS

Простой
Как добавить индивидуальный фон для каждого изображения?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пропадает красная обводка таблицы?
- 3 подписчика
- вчера
- 111 просмотров
0

ответов
Показать ещё Загружается…

Web-программист (Bitrix) / PHP, CSS, JS (Fullstack)

VIARDA

от 60 000 до 150 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Frontend разработчик

Базис-Центр • Коломна

от 30 000 до 70 000 ₽

Создать логотип

29 июн. 2024, в 07:14

3000 руб./за проект

Разработка приложения на Flutter

15 июн. 2024, в 13:31

1400 руб./в час

Написать JavaScript в программе android-studio-windows

29 июн. 2024, в 00:07

3000 руб./за проект

а какой именно сдвиг ? смотри если у тебя изначально header имеет position: fixed и мы прокрутили страницу на половину и решили открыть модальное окно - в этот момент header как двигался сверху так и будет оставаться сверху, о каком сдвиге ты говоришь - непонятно, точнее опиши проблему
szQocks, спасибо что откликнулись )
При открытии модального окна header сдвигается в сторону (вправо).
И видимо как раз на 17px (ширина полосы прокрутки).
Сдвиг контента удалось скорректировать, а вот сдвиг header не выходит.
malayamarisha, хотя нет, туплю, сдвига не будет, проверил, я думал сдвиг будет наверх. А ты говоришь в право, тут единственный вариант вижу это добавить padding который равен ширину скролла для body и header, во время открытого модального окна, но и лучше этого не делать, пусть прыгает.
szQocks, Спасибо огромнейшее за помощь, развернутый ответ, подсказки )
В процессе написания ответа пришла мысль, что не верно получалось добраться до нужного блока.
Есть разметка при открытом модальном окне (body добавляется класс modal-open) :

<body class="body modal-open"> <header class="header fixed-header"> <div class="container-fluid header-container pl-0 pr-0 header--fixed"> <div class="top-menu"></div>  <div class="navbar"></div>  </div> </header> </body>

Рабочий вариант:

body.modal-open>header>.header--fixed { padding-right: 17px !important; }

Были попытки добавить padding-right header-у (ниже одна из многочисленных попыток):

body.modal-open>.header--fixed { padding-right: 17px !important; }

Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
malayamarisha,
Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
да хоть так и хоть так - будет проблема какая-нибудь

я делал проекты с модальными окнами - у меня там прыгал контент вправо при открытии модальных окон - и я считаю это нормой

P.S да и толком я ничем не помог
malayamarisha, При нормальной верстке должно быть достаточно селектора .modal-open .header--fixed и без всяких important
Если недостаточно, то смотрите какому селектору вы до этого задавали паддинг и разбирайтесь почему и зачем у него высокая специфичность.

И > это прямые потомки, а вам нужен непрямой, поэтому обычный пробел.

Answer 1 · 2023-12-04 09:35:24

body.modal-open header {
    overflow: hidden;
position: relative;
    padding-right: 17px !important;
}

пока существует класс у body modal-open header будет с этими параметрами. Уберётся класс всё вернётся как было.

Как сделать чтобы модальное окно не сдвигало блок position:fixed?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт