Blank page on basic example - tried everything!


I used DHTMLX a couple of years ago and have always found it highly impressive - thankfully, nothing has changed. DHTMLX is awesome.

However, I’ve been troubleshooting this for a day now, and I’m running out of things to try! I can feel a face-palm coming - but I just can’t see the problem :unamused:

I’ve got a very simple example - some code from the v5 designer, wrapped in relevant HTML:

<!DOCTYPE html>
    <title>Org Structure Manager</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" type="text/css" href="dhtmlx/codebase/fonts/font_roboto/roboto.css" />
    <link rel="stylesheet" type="text/css" href="dhtmlx/codebase/dhtmlx.css" />
    <script src="dhtmlx/codebase/dhtmlx.js"></script>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            overflow: hidden;
    <script type="text/javascript">
        dhtmlxEvent(window, "load", function () {
   = 'dhx_web';
            var main_layout = new dhtmlXLayoutObject(document.body, '3E');

            var a = main_layout.cells('a');

            var b = main_layout.cells('b');

            var status_1 = main_layout.attachStatusBar();

This renders without any styling:

All the resources loaded okay:

And I can see the elements there, but they’ve got suspicious looking height values in the style attributes:

The CSS is being loaded okay with the following code:

var allRules = []; var sSheetList = document.styleSheets; for (var sSheet = 0; sSheet < sSheetList.length; sSheet++) { var ruleList = document.styleSheets[sSheet].cssRules; for (var rule = 0; rule < ruleList.length; rule ++) { allRules.push( ruleList[rule].selectorText ); } }
which returns 908 items

(908) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, ".dhtmlxcalendar_ifr", ".dhtmlxcalendar_dhx_skyblue", ".dhtmlxcalendar_dhx_skyblue ul.dhtmlxcalendar_line", ".dhtmlxcalendar_dhx_skyblue ul.dhtmlxcalendar_line li", ".dhtmlxcalendar_dhx_skyblue.dhtmlxcalendar_in_input", ".dhtmlxcalendar_dhx_skyblue div.dhtmlxcalendar_month_cont", ".dhtmlxcalendar_dhx_skyblue div.dhtmlxcalendar_mon…e li.dhtmlxcalendar_cell.dhtmlxcalendar_month_hdr", ".dhtmlxcalendar_dhx_skyblue div.dhtmlxcalendar_mon…calendar_month_hdr div.dhtmlxcalendar_month_arrow", ".dhtmlxcalendar_dhx_skyblue div.dhtmlxcalendar_mon…endar_month_arrow.dhtmlxcalendar_month_arrow_left", ".dhtmlxcalendar_dhx_skyblue div.dhtmlxcalendar_mon…month_arrow.dhtmlxcalendar_month_arrow_left_hover", ...

I have tried:

  • Placing execution markers (console.log) throughout the code - works fine.
  • Changing the methods of invokation (inline js onload, window.onload, method used above) - no change
  • Moving script tag under head or body tags - no change
  • Manually setting width and height values of the layout cells (as in above) - no change
  • Changing location of the .HTML file - no change
  • Changing the technology serving the HTML file - no change
  • Viewing the samples through the server - they work fine! :imp:
  • Creating a DIV element in the body and binding the DHTMLX layout object to that - no change

I’ve already looked at: … ext#p66207 … le#p111794
…and countless others.

OMG what the heck am I missing?! :blush:



This is so stupid.

If anyone ever hits this same problem: simply remove the line of code … = 'dhx_web';

All working.

As far as I’m concerned, this is a defect in the V5 designer.

In the properties of your project in the visual designer you need to define the using skin: