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 
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!
- 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?! 
A
