Invisible and width: 0px height: 0px dhtmlxLayout

Suite and Optimus Suite 5
#1

Hi,

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.

Cheers,
Alex

#2

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

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

#3

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.

#4

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…

#5

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>
    </fieldset>
  </div>
</div>

This is the way I solve it:

 $(".SettingsSourceContentDiv").css("display","");
    try{
        backupLayout = new dhtmlXLayoutObject('settingsBackupDiv', '1C');
        backupLayout.setImagePath('dhtmlxLayout/codebase/imgs');

        backupGridCell = backupLayout.cells('a');
        backupGridCell.hideHeader();

        backupGridToolbar = backupGridCell.attachToolbar();
        backupGridToolbar.loadXML('html/backupGridToolbar.xml', function(){});
        backupGridToolbar.setIconsPath('images/');
        backupGrid = backupGridCell.attachGrid();
        backupGrid.setSkin("dhx_skyblue");
        backupGrid.setImagePath("dhtmlxGrid/codebase/imgs/");

        backupGrid.setHeader(["Column 1","Column 2"]);
        backupGrid.setColTypes("ro,ro");
        backupGrid.attachEvent('onEditCell', function(stage,rId,cInd,nValue,oValue){return false;});
        backupGrid.init();
        backupGrid.clearAndLoad("RatingsConnector.do?action=getChangedRatings");
    }finally{
        $(".SettingsSourceContentDiv").css("display","none");
    }
#6

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.

Cheers,

Alex

#7

Hi, Alex Neblett
You can leave your propose here:
viewforum.php?f=10