Using default viewport for windows breaks page layout

Suite and Optimus Suite 5
#1

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.

#2

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.

#3

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.

#4

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

#5

Hi

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

#6

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.unload();
      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.

#7

Hello, dbasri
Thanks for sharing your solution :slight_smile:

#8

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