Invisible and width: 0px height: 0px dhtmlxLayout


I have a strange situation.

I have a tab control inside a ribbon control which creates a layout that looks like MS Word.

When I place a dhtmlxForm inside the content area of the tab, it appears perfectly.

When I place a dhtmlxLayout or a dhtmlxTabbar inside the content area of a tab, it is invisible and the height and width are set to 0px. Obviously, either the ribbon control or the tab control are causing the issue with some inherited css, but I have not been able to figure out what it is. Do you have any idea what might cause this? I was hoping you could tell me what dhtmlxLayout uses to determine the height and width it sets in dhxcont_global_layout_area.

I have set the min-height, height and width of the outer bounding div to 100% both via style and class (even using !important), but it makes no difference. You can see below what I am talking about.


It seems like you need to set the style to your page:

<style> html,body { height: 100%; margin: 0px; overflow: hidden; } </style>

I have the same issue here.

Something is causing the Layout to be sized as 0 width and height.

Setting html and body width and height to 100% has no effect.

Hello, patochem
Could you provide us code snippets to inspect it? It can depend on layout’s parent div or wrong attachment to thу document.body…

I finally found what caused the layout to be dimensioned to 0.
The div to which I attach the Layout has an ancestor which initially has its style set to “display:none;” and thus possibly inherit the style when it’s created.

<div class="SettingsSourceContentDiv wrap" style="display:none;">
  <div id="dataSourcesTabs">
    <fieldset id="settingsBackupDivMain" style="background: white; color:#005496;">
      <legend>Available Backup Files</legend>
      <div id="settingsBackupDiv" style="display:block; position:relative;width:100%;height: 250px;"></div>

This is the way I solve it:

        backupLayout = new dhtmlXLayoutObject('settingsBackupDiv', '1C');

        backupGridCell = backupLayout.cells('a');

        backupGridToolbar = backupGridCell.attachToolbar();
        backupGridToolbar.loadXML('html/backupGridToolbar.xml', function(){});
        backupGrid = backupGridCell.attachGrid();

        backupGrid.setHeader(["Column 1","Column 2"]);
        backupGrid.attachEvent('onEditCell', function(stage,rId,cInd,nValue,oValue){return false;});

The problem I faced came from the same issue. In my case, I had forms inside tabs inside a layout inside a tab control from another vendor that allows tabs on the side with left to right text orientation which is why I did not use dhtmlx tabs for that. Their control used display: none to hide the control which triggered the issue in all the dhtmlx controls that were inside the other vendors tab control. Because of the sequence, I had to fix the widths with some javascript code that ran later, but it would be great if the display: none was not inherited.



Hi, Alex Neblett
You can leave your propose here: