Using default viewport for windows breaks page layout

If you don’t specify viewport when creating windows it uses document.body.
It then proceeds to add static positioning and a skin specific class (.dhxwins_vp_dhx_skyblue) to the body element - that class has ‘overflow:hidden’

This makes the scrollbars on my page disappear!

I use dhtmlxSuite 4.0.3 and IE11 on Windows 8.1

Forcing overflow on the body element isn’t acceptable.

You can hide it manually. DHTMLX components in common use body without scrolls (for width and height). Or you need to use any viewport object.

I ended up doing:

body.dhxwins_vp_dhx_skyblue { overflow: auto !important; }

but I still feel it’s bad form to introduce side effects like modifying the body element.
A better option would be to skip using a viewports at all if not explicitly specified.

Question :
can’t this option be implemented : by unloading the window automatically removing the class dhxwins_vp_dhx_skin ?


our general concept is a scroll-less document.body (fullscreen layout as a parent), that’s why windows hides scroll. body is a default viewport. you can use your css fix, its not a problem.

by unloading the window automatically removing the class dhxwins_vp_dhx_skin

there are two things:

  1. var dhxWins = new dhtmlXWindows(), and
  2. var w1 = dhxWins.createWindow(…);

dhxwins_vp_dhx_skin will removed only if you call dhxWIns.unload(), not by closing w1

We ran into a similar issue with the scrolling due to the “dhxwins_vp_dhx_skyblue” css class being automatically added to the document body element.
Since it was only after opening a specific tab cell, we were able to trace it back to the dhtmlXAccordion object. When the accordion is created, it creates it’s
own “this.dhxWins” property and a new dhtmlXWindows object. You can see this near the bottom of the “dhtmlXAccordion” function in dhtmlx.js Since the dhxWins didn’t have a viewport set, it added the default “xwins_vp_dhx_skyblue” class and was unable to scroll vertically on mobile devices.

To fix it, instead of going the CSS override route, we added a method to the accordion object and unload the dhxWins property from the accordion.

if(dhtmlXAccordion !== undefined && typeof(dhtmlXAccordion) === "function"){
   dhtmlXAccordion.prototype.pei_unloadWins = function(){
      if(typeof(this.dhxWins) === "undefined" || this.dhxWins === null){
         return this;
      if(typeof(dhtmlXWindows) !== "function"){
         return this;
      if(this.dhxWins instanceof dhtmlXWindows !== true){
         return this;
      this.dhxWins = null;
      delete this.dhxWins;
      return this;

We load this before the instantiate any accordions and call “pei_unloadWins” directly after a new accordion is created.

Hello, dbasri
Thanks for sharing your solution :slight_smile:

A very annoying problem. Constantly have to solve it. I don’t understand why the developers dhtmlx unable to solve it. :angry: