Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Mickey on Jan 12, 2010 14:52
open dhtmlx forum
Calendar setPosition on Input box

I've read several of the other posts on this topic but I'm still not sure what the best answer is.
I have one instance of a calendar object attached to several input boxes on a page. All are functioning properly.

I notice if the calendar appears near the bottom of the page it automatically adjusts to align the bottom of the calendar with the top of the input box... otherwise it aligns the top of the calendar with the top of the input box.

I simply want to adjust the position of the popup calendar so that the middle is always aligned with the middle of my input boxes instead of the top or bottom. Is it possible to adjust the CSS of either the calendar or the input box to do this?
setPosition(x,y) does not seem to apply to input boxes... especially where multiple inputs use the same calendar.

Thanks.
Answer posted by Alex (support) on Jan 13, 2010 01:04

>> I simply want to adjust the position of the popup calendar so that the middle is always aligned with the middle of my input boxes instead of the top or bottom

You can modify the dhtmlxcalendar.js:

try to locate line

 this.parent.style.top = aTop + 'px';

and replace it with 

this.parent.style.top = aTop - this.parent.offsetHeight/2 + 'px';

Answer posted by Mickey on Jan 13, 2010 06:50

That works! Thanks!!

Calendars near the bottom of the page still align to the top of the input box if there is not enough room to display the calendar... but adding a break tag or two takes care of that and I wouldn't normally want an input field right at the bottom of the page anyway.

Answer posted by Alex (support) on Jan 13, 2010 06:55

>> Calendars near the bottom of the page still align to the top of the input box if there is not enough room to display the calendar

You can also modify the following line:

this.parent.style.top = aTop - this.parent.offsetHeight + this.activeCon.offsetHeight + 'px';

as follows:

this.parent.style.top = aTop - this.parent.offsetHeight/2 + this.activeCon.offsetHeight + 'px';

Answer posted by Mickey on Jan 13, 2010 08:43

Peachy... Works a treat!

Thanks again!!