Scrolling if lightbox is too large for screen

When the lightbox is displayed the screen cannot be scrolled. When displayed on a small screen the positioning causes the top and bottom of the box to be displayed off screen where they can’t be reached by the user. We have a lightbox with a number of additional fields, and this is causing problems for a handful of users. I’ve attached a screen shot to better explain what we’re seeing.

Is there any way to easily prevent the top of the lightbox from being positioned off screen if it doesn’t fit in the available height and to allow the user to scroll to see the remainder of it?


Hello,

Lightbox behavior will be changed in the upcoming version. As for now you try replacing scheduler.showCover function, open dhtmlxscheduler.js file:

  1. Locate
scheduler.showCover=function(
  1. Now change whole function declaration to:
scheduler.showCover=function(B){if(B){B.style.display="block";var A=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;var C=window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft;if(document.documentElement.scrollHeight>document.body.offsetHeight){B.style.top=Math.round(A+Math.max((document.body.offsetHeight-B.offsetHeight)/2,50))+"px"}else{B.style.top=Math.round(Math.max(((document.body.offsetHeight-B.offsetHeight)/2),50)+9)+"px"}if(document.documentElement.scrollWidth>document.body.offsetWidth){B.style.left=Math.round(C+(document.body.offsetWidth-B.offsetWidth)/2)+"px"}else{B.style.left=Math.round((document.body.offsetWidth-B.offsetWidth)/2)+"px"}}this.show_cover()};

That depends on your page layout. If your html, body elements are not limited to height: 100%; (in such case you will have to set dimensions to scheduler container) then scrollbar will be displayed.

Best regards,
Ilya


I’m having the same issue but in the new version. Maybe I just need to change a configuration setting?

Try to use

scheduler.config.wide_form = true;

Scheduler will use a different form layout, which is less vertical space consuming ( in case of terrace skin - this is default behavior )

Hi! I have the same issue :frowning: This is my version(on my workstation), but scheduler is used by many people with lower resolution and they cant submit event. For now I just suggested Ctnrl+ - for set page zoom to 0.5. I think add button +/- to interface it would zoom in and out page. Maybe there is more advance way to solve this problem :confused: ???


To easily set overflow on the lightbox content do the following:

Head into the dhtmlxscheduler.js file and find the following section:

scheduler.getLightbox=function(){

now towards the end of the function declaration, before the setLightboxSize() call, the following can be found:

for(var h=a.getElementsByTagName("div"),d=0;d<h.length;d++){
	var k=h[d];
	if(k.className=="dhx_cal_larea"){
		k.innerHTML=b;break
	}
}

Now replace it with this:

		for(var h=a.getElementsByTagName("div"),d=0;d<h.length;d++){
			var k=h[d];
			if(k.className=="dhx_cal_larea"){
				k.id = 'calArea'; //I set an id so I can easily reference the lightboxes content area later.
				k.style.overflowY='auto';
				k.innerHTML=b;
				break
			}
		}

It should end up looking something like this then:

scheduler.getLightbox=function(){
	if(!this._lightbox){
     ...
     Code that generates the lightbox html
     ...
     for(var h=a.getElementsByTagName("div"),d=0;d<h.length;d++){
			var k=h[d];
			if(k.className=="dhx_cal_larea"){
				k.id = 'calArea';
				k.style.overflowY='auto';
				k.innerHTML=b;
				break
			}
		}
		this.setLightboxSize();
		this._init_lightbox_events(this);
		a.style.display="none";
		a.style.visibility="visible"
	}
	return this._lightbox
};

NOTE: Please keep in mind i’m working with the minified js file, so the variable names may not match, in this case you’ll need to work out what the corresponding variables are, that are being used within the function, you should still do a ctrl+F and look for “scheduler.getLightbox” definition and then the “setLightboxSize()” call within that function, as these should be the same regardless of version.