Как убрать отступ вверху страницы?

Question

[zeaovede]

Если вызвать ошибку при авторизации, то при прокручивании вниз вверху страницы возникает отступ. Это можно как-то пофиксить?

spoiler

https://ggraft.ru/login/

Answer 1

[wonderingpeanut]

Приветствую.
Самый простой вариант - сделать div.row с ошибкой position absolute.
Вариант сложнее - при появлении ошибки уменьшать высоту div.form-container на высоту div.row с ошибкой.

Comments

[zeaovede]

Не совсем понимаю, что значит сделать с ошибкой?

[wonderingpeanut]

zeaovede, это значит дать элементу div с классом row свойство position со значением absolute

[zeaovede]

wonderingpeanut, не уверен, что справлюсь. Я там полтора часа крутил вертел. Каждый раз остальная верстка сыпалась. Так и не пришел к чему-то нормальному. На словах не догоняю все равно, как это может пофиксить. Позже смогу затестить

[zeaovede]

Вы же об этом?

<div class="row">
<style>
.row {
position: absolute;
}
</style>

[wonderingpeanut]

zeaovede, да, об этом. Только я бы сделал более специфичный селектор на случай, если класс row используется где-то еще.

.woocommerce-notices-wrapper > .row {
  position: absolute;
  left: 0;
  right: 0; /* на случай если не будет занимать всю ширину экрана */
  z-index: 1; /* отображать поверх других элементов */
  top: 0;
}

[zeaovede]

wonderingpeanut, "Вариант сложнее - при появлении ошибки уменьшать высоту div.form-container на высоту div.row с ошибкой." Можете пример показать?

[wonderingpeanut]

zeaovede,

const banner = document.querySelector('.banner');
const bannerHeight = banner.offsetHeight;
const parent = document.querySelector('.parent');
if (banner) {
  parent.style.height = `calc(100vh - ${bannerHeight}px`
}

как-то так

[zeaovede]

wonderingpeanut, тут прямо что-то космическое для меня. Вместо banner нужно вставлять .form-container, а вместо .parent нужно вставлять .row? или как это работает

[wonderingpeanut]

zeaovede, почитай здесь: https://developer.mozilla.org/ru/docs/Web/API/Docu...
вместо селектора .banner нужно подставить селектор банера с ошибкой (такой же селектор как в css), вместо parent form-container.

[zeaovede]

wonderingpeanut, В общем, я вставил вот так

const  banner = document.querySelector('.l-image');
const bannerHeight = banner.offsetHeight;
const parent = document.querySelector('.form-container');
if (banner) {
  parent.style.height = `calc(300vh - ${bannerHeight}px`
}

И вроде бы это даже работает. Будет минутка взгляните пожалуйста. Спасибо

spoiler

https://ggraft.ru/login/

[wonderingpeanut]

zeaovede, это работает благодаря изменениям стилей css) джаваскрипт не нужен

[zeaovede]

wonderingpeanut, В css показывает ошибки