Odd rendering of calendar: scroll bar won't scroll to bottom

Scheduler Javascript
#1

Hello,

I’ve been having a very strange problem that I’m sure has to do with my page layout but I can’t seem to find it. The calendar view is rendered mostly correctly, except that when you attempt to scroll to the bottom of the page, the last ~2hours are not visible. (It’s as if overflow:hidden is set on .dhx_scale_holder_now, but it isn’t.

The page has a 47px header:
div.header
{
background-image: url(“/images/headerbg.png”);
background-repeat: repeat-x;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-size: 10px;
height: 47px;
}

and the calendar is rendered immediately after it. The body style is set to 100% with hidden overflow, and it doesn’t seem to matter whether the header div and the .dhx_cal_container div have as their parent, a common parent

with height:100% as their parent, etc. Obviously if I remove the header, it’s fine… But changing the padding on the header doesn’t fix the problem (and it’s obvious that more than 10px are missing). I’ve attached an image showing what it looks like, but I’m pretty sure it’s just the 47px taken by the header are causing the bottom of the calendar to overflow the bottom of the browser and not being shown.

I’ve experimented with various changes to the layout style (padding, overflow settings, adjusting the height, etc.) but nothing fixes it. The problem appears on Safari 4.0.5 and Firefox 3.6.3 - I haven’t tested any other browsers yet.

Any ideas on how to make it render correctly?

Thanks in advance - it’s a real pleasure to be able to work with dhtmlxScheduler, and the help on this forum has been great.

Chris

Screen shot 2010-05-20 at 1.46.56 AM.png1022×121 26.7 KB

#2

If you set a 100% as height of scheduler, it can be , that scheduler calculates those value as 100% of body, ignoring the fact, that you have some header div. You can try to add the next options to initialization of a scheduler

scheduler.xy.margin_top = 47;

This will instruct scheduler, to decrease size by defined margin value.

#3

Thanks - I just tried this, but it doesn’t change the way the page is rendering. Is there something else I should try or maybe something I’m missing?

Regards,
Chris

#4

It possible that you have some complex css conflict between styles of scheduler and your custom styles ( it possible if you have some global css rules, which affects all elements on the page )

Do you have some kind of demo link where issue can be checked?

#5

I was able to duplicate it very easily with 01_basic_init.html sample. Here’s what I did:

html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } [b]
test
[/b]
 
 

Am I missing something? Maybe I just don’t know how to use the .xy.margin_top property?

Thanks again for your help,
Chris

#6

Just change the order of commands as

scheduler.xy.margin_top = 47; scheduler.init('scheduler_here',null,"week");