а

Blank page on basic example - tried everything!


#1

Hi,

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>
<html>
<head>
    <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>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        dhtmlxEvent(window, "load", function () {
            window.dhx4.skin = 'dhx_web';
            var main_layout = new dhtmlXLayoutObject(document.body, '3E');

            var a = main_layout.cells('a');
            a.setHeight('150');
            a.setWidth('150');

            var b = main_layout.cells('b');
            b.setHeight('150');
            b.setWidth('150');

            var status_1 = main_layout.attachStatusBar();
            status_1.setText('Test!');
        });
    </script>
</head>
<body>
</body>
</html>

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:

forum.dhtmlx.com/viewtopic.php? … ext#p66207
forum.dhtmlx.com/viewtopic.php? … le#p111794
forum.dhtmlx.com/viewtopic.php?f=5&t=59525
…and countless others.

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

A


#2

OH. MY. GOD.

This is so stupid.

If anyone ever hits this same problem: simply remove the line of code …

window.dhx4.skin = 'dhx_web';

All working.

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


#3

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