Почему улетает календарь?

Question

[Jack London]

Всем доброго времени суток! Есть такая страница сайта, на которой раньше в сайдбаре нормально работал bootstrap datepicker, после того как было переделано сайдбар со статичного в "прилипающий", начались проблемы с тем же календарем, а именно он работает, но появляется в самом верху на слайдере, что не есть ок. Прошу Вашей помощи в решении данной проблемы, заранее всем спасибо!

Answer 1

[Сергей Собко]

Проблема с вашим дейтпикером лежит в этой строчке

document.getElementsByTagName("body").item(0).appendChild(e_cal);
tcall.js 168 строка, если верить дебаг-консоли хрома

То есть получая координаты элемента, по которому сработало событие click, контейнер дейтпикера аппендится к body, имея координаты х и y при display: absolute. Из-за того, что у родительской обёртки section, в котором лежат кнопки дейтпикера, свойство position изменяется на fixed, то вот этот код получения координат

var n_left = f_getPosition (this, 'Left'),
		n_top  = f_getPosition (this, 'Top') + this.offsetHeight;

отсчитывает их НЕ от верха страницы, как это делалось до изменения position, а от верха родительского section, что равняется top: 343px; left: 426px;. И координаты то эти правильны, если отображать его относительно родительского section, но совершенно не верны из-за того, куда аппендится сам дейтпикер.

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

Comments

[Jack London]

Вместо кода

var n_left = f_getPosition (this, 'Left'),
      n_top  = f_getPosition (this, 'Top') + this.offsetHeight;

установил подобранные константы

var n_left = x,
      n_top  = y;

и сделал, что бы календарь прикреплялся не к body, а div`у со свойством position: relative; внутри section самого сайдбара

document.getElementsByClassName("sticky_temp_wrap").item(0).appendChild(e_cal);

в принципе календарь появляется не под каждым инпутом как раньше, а оба в 1 месте, но это не проблема я думаю, главное что ни где попало и проблема решена, если бы я лучше знал js, может бы что и лучше накодил. Спасибо, что ткнули носом куда надо, очень Вам благодарен!