Grid content area below header has 0 height.

Suite and Optimus Suite 5
#1

When I open a simple dhtmlxgrid in a dhtmlxwindow, the grid cell area height is 0 and the grid height is set to the height of the header (25px) in firefox and chrome. The header is shown, but nothing else. The window contents only contains the grid.

<div class="soria">
  <div id="dialogWithGrid" style="background-color:white"></div>
</div>

In IE8, the grid renders fine. As I mentioned, in firefox and chrome, only the header is shown, and I found the height of the grid content (below) headers is 0.

Adding height:100% to the style above corrects the issue in firefox and chrome, but then the content in IE disappears. Any ideas on the proper way to correct this?

Here is the function I am using to open the dialog with the grid.

dialogWithGrid = function (title, headers, jsarray, widths, types, aligns, sorts) {

  var dialogWithGridHTML =
    '<div class="soria" style="display:block;">' + 
    '<div id="dialogWithGrid" style="background-color:white"></div>' +
    '</div>';
 
  dhxWins.setImagePath("/mdata/dhtmlxWindows/codebase/imgs/");
  var win = dhxWins.createWindow(title, 20, 20, 450, 275);
  win.setText(title);
  win.attachHTMLString(dialogWithGridHTML);
  makeDhtmlxPopupRegular(win);
 
  var mygrid = new dhtmlXGridObject('dialogWithGrid');
//  mygrid.setImagePath("../../codebase/imgs/");
  if (headers) { mygrid.setHeader(headers); }
  if (widths) { mygrid.setInitWidths(widths); }
  if (types) { mygrid.setColTypes(types); }
  if (aligns) { mygrid.setColAlign(aligns); }
  if (sorts) { mygrid.setColSorting(sorts); }
  mygrid.init();
  mygrid.setSkin("dhx_skyblue");
  mygrid.parse(jsarray,"jsarray");
},

I have attached images of the dialog in ie and firefox.

Thanks for your help.

Cheers.





#2

Let me add that when I set the height to some percentage, IE calculates the height as 4px.

ie_with_height.PNG976×175 9.39 KB

#3

Please, try to attach your grid to the window using the attachGrid() method.
docs.dhtmlx.com/doku.php?id=dhtm … dhtmlxgrid
dhtmlx.com/docs/products/dht … _grid.html

#4

sematik,

Thank you for your suggestion. The grid renders properly now, but unfortunately the window looses styling and controls in IE8. Looks fine in Chrome and Firefox. Any thoughts on how to correct this?

  dhxWins.setImagePath("/mdata/dhtmlxWindows/codebase/imgs/");
  var win = dhxWins.createWindow(title, 20, 20, 450, 275);
  win.setText(title);
 
  var mygrid = win.attachGrid();  
  if (headers) { mygrid.setHeader(headers); }
  if (widths) { mygrid.setInitWidths(widths); }
  if (types) { mygrid.setColTypes(types); }
  if (aligns) { mygrid.setColAlign(aligns); }
  if (sorts) { mygrid.setColSorting(sorts); }
  mygrid.init();
  mygrid.setSkin("dhx_skyblue");
  mygrid.parse(jsarray,"jsarray");


#5

Unfortunately the issue cannot be reproduced locally.
Please, make sure that all css files included successfully.
If the issue still occurs for you, pleas,e provide with a complete demo/demo link, where the issue can be reconstructed locally.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/auxiliary_docs__ … pport.html

#6

The attachGrid() approach is working now. I am not sure what the problem with the window was in IE, but it seems to have gone away. Thanks, again!