В замешательстве, не адаптируется по центру

Question

Скрипт настроен верно и подсчитывает координаты тоже верно. Работаю над модальными окнами, вставляю содержимое блоков(html) в модальное окно двум способами

Html блок находится в домдокументе, присвоено свойство display:none. Он скрыт и отображается только в модальном окне. С данным вариантом нет трудностей, выравнивается по центру.
Второй способ - когда всплывает модальное окно, но html кода нет. Для этого отправляем ajax на его получение, как только приходит ответ. Вставляем содержимое и выравниваем блок.

Примечательно то, что если ширина скажем 1000, блок выравнивается по обеим сторонам с точностью до пикселя.

Но если ширина менее 600, то изначальное модальное окно которое всплывает по клику выравнивается по центру, а при вставке html. Оно меняет координаты, то есть меняет но не достаточно. Если при получении необходимо сместить на 100px левее, оно сдвигается всего на 50. Если изменить ширину окна, то все становиться на свои места. То есть алгоритм подсчета верный

При каждом выравнивании, беру ширину блока

item[0].querySelector('div').scrollWidth

Вот тут самое интересное. Если посмотреть ту ширину которая берется при вставке то она на 50-100 меньше, если изменить ширину экрана, то выдаст верную.

То есть блок не успевает толком отобразится, как берется ширина. Проблему можно решить если выставить фиксированную ширину на подгружаемый блок. В таком случаи все работает, но задача стоит в том, чтобы данный блок сужался по ширине

Так не работает

max-width: 450px; width: 100%;

Так работает, но блок не адаптивный

max-width: 450px; width: 450px;

Пробовал, пробовал задержку 5-10 сек, все тоже самое. ПРи первом обращении ширина равна 350 вместо 450. Опятже выполняю ресайз окна и выдает верную шириную

function ps(item) { 
  console.log(item[0].querySelector('div').scrollWidth);
}

setTimeout(function() { ps(block);}, 2000);

Вообщем хелп, как получать верную ширину блока. Тогда когда html приходит по jaix запросу и блок не находится изначально в документе и не имеет фиксированной ширины

Answer 1

Если я правильно понял суть вопроса, то выровнять любой блок на странице по вертикали и горизонтали, не зная ширины и высоты, можно таким способом: (изменяй ширину и высоту, но блок все ровно будет стоят ровно по центру екрана)

.modal{
    width: 25%;
    height: 450px;
    background: #000;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="modal"></div>

БЛОГ НА HUSL

В замешательстве, не адаптируется по центру

Ответы (1 шт):