Что не так с кодом?

Question

[Дмитрий]

Цель такова: открывать попап так, что бы он не вызывал горизонтального скроллинга (т.е. если он не помещается в экран, то должен открываться слева от блока).

Подумал о вот таком способе:

var popup = document.getElementById('popup__calendar');

	if(popup.getBoundingClientRect().right > document.body.clientWidth){ 
        //если координаты попапа с правой стороны больше ширины клиентского экрана, 
        //то спозиционировать его слева от блока
		popup.style.left= className[i].offsetLeft + 'px'; // + 200
		popup.style.top = className[i].offsetTop + 'px';
	} else{
        // иначе справа
		popup.style.right= className[i].offsetLeft + 'px'; // + 200
		popup.style.top = className[i].offsetTop + 'px';
	}

Но в итоге происходит вот следующее (гифка): https://gyazo.com/206a464a074b3d1cd7aa4ef1d6b90913
Подскажите, что я сделал не так? Или может есть какой-то другой способ (уверен что есть :) )

Answer 1

[TheML9I]

не вникая в код и верстку как минимум не будут работать одновременно указанные top и bottom, left и right. Нужно использовать только одну границу из каждой пары.

При каждом клике лучше выставлять только left. Можно отрицательный.

Comments

[Дмитрий]

А почему не будут работать? Вполне нормально работают. На первом скрине как раз одновременно указаны left и top, только без условия.
С отрицательным маргином получается вот так https://gyazo.com/98be8e0734e2138e9bf1018b287ec3a9

[Максим Мосейчук]

Дмитрий: "одновременно указаны left и top"
Об этом и говорят. Пары top-bottom и left-right не будут работать.

[Дмитрий]

fshp: почему нет, если работают? Без указания left, попап будет отображаться за самим календарем; без указания top, попап будет отображаться ниже календаря. Это ведь просто назначение стилей. Что именно я не понимаю?)

[Максим Мосейчук]

Дмитрий: Нельзя одновременно привязаться к верху и низу. Так же нельзя одновременно привязаться к правому краю и к левому.

К правому верхнему углу можно. А правого левого угла просто не существует.

[Дмитрий]

fshp: т.е. в else нужно заменить right на left? Ибо я не пойму о каком участке кода идет речь) Но тогда проблема остается, только в несколько ином виде
popup.style.left = className[i].offsetLeft - 400 + 'px'; // + 200

Answer 2

[vvkovaliov]

Лучше только left использовать. И ставить ширину попапа.