CSS Rendering of Scroll Bar


I’ve been working on a scheduler that has a large number of sections within the timeline view. However, the “dhx_cal_data” container is so big that I can’t view the entire list.

From what I’ve been able to ascertain from Chromes dev tools, this is being set (and can be adjusted) by element.styles, but I can’t locate where this is being determined.

Could you help out? It is probably worth noting I am using the terrace skin.

Timeline section ( as most of views in scheduler ) can have only Y scroll
And it must appear automatically when height of sections is more than the screen’s height
If you such situation and scroll is not shown - it looks as a bug - can you provide some kind of sample or demo link where it can be checked ?

Hi Stanislav,

Thanks for the help.

I can’t offer a link as the scheduler is hosted internally, but screen shot is attached. You can see that the section is past what can be made visible on the screen.

I’ve also included Chrome tools in the screen shot so you can view the associated styling.


Just to be clear, the scroll bar is shown, but the end extends beyond the browser window. Re sizing the associated style to say, 85% height works temporarily, but as this is calculated dynamically, it is not a general solution.

It seems there is a problem with scheduler size auto-detection
During init, component check size of its main container and adjust self accordingly. There are few cases, when it can go wrong

  • you have padding or margin assigned to the scheduler’s container
  • you have fixed size on scheduler’s container, which is bigger than window height

Try to check the size of main scheduler’s container in dev tools

Also, if you have height:100% on scheduler’s container - beware that it will not take in account any html elements which are placed above scheduler ( same as normal html ), so it will be not “all available space” but “full height of window”.

You can use the next to compensate sizing

scheduler.xy.margin_top = 100; //height = 100% - 100px