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?
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.
Hi! I have the same issue 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 ???
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.
Get a guaranteed answer from DHTMLX technical support team
under the most suitable support plan