Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jim Soho on Jun 01, 2009 21:01
open dhtmlx forum
grid.enableAutoHeight

Hi,

I'm working with grid v2.1.
I want my grid to fill up the entire area of the bottom-right part of the browser window.

+-------------------------------------------+
| header |
+-------------------------------------------+
| | |
| left | GRID |
| | |
+-------------------------------------------+

HTML looks somewhat like:

<body>
<div id="header"></div>
<div id="left-area"></div>
<div id="right-area">
<div id="gridbox" class="full_width" style="min-width:600px; width:100%;"></div>
</div>
</body>

JS code looks somewhat like:

grid = new dhtmlXGridObject('gridbox');
grid.setInitWidths("70,*,150");
grid.enableAutoHeight(true);
grid.enableAutoWidth(true, 99999, 600);
// etc.


I encountered a few problems:

1) If width:100% is not directly specified within the style attribute of the grid div, as above, but instead in a css class then auto width doesn't work.

2) In Safari the initial load will always show a placeholder for a scrollbar to the right of the grid. You can also see this in the demo for "Auto Height" at the dhtmlx.com website. When you resize the browser slightly, whatever way, this placeholder disappears (if you have auto width enabled only). Is there a way that this placeholder doesn't appear in Safari on initial load?

3) On the initial load in IE7 and Safari it will show a horizontal scrollbar. In FF it works fine. In IE7 the horizontal scrollbar is always present, whether you resize or not. In Safari the horizontal scrollbar disappears if you resize slightly (see point 2, suggesting it should be possible to NOT show this placeholder space on initial load).

4) In all browsers: when a vertical scrollbar appears it covers the entire height of the grid. When you scroll down then the header disappears together with the first rows. I think this is unusual. The header should always stay visible. Only the "objbox" part should become scrollable. Is there a way to work around this?


Best regards,
Jim

Answer posted by Support on Jun 02, 2009 01:58
>>but instead in a css class then auto width doesn't work
This is known issue, unfortunately while retrieving css styles in FF, browser returns actual value in pixels instead of percents, so correct width can be detected if it was defined in percents. This occurs only if width was defined through css class.

>>In Safari the initial load will always show a placeholder
Add the next line to the init of the grid, it will fully remove vertical scroll.
grid.objBox.style.overflowY="hidden";

>>On the initial load in IE7 and Safari it will show a horizontal scrollbar.
Technically it can be removed same as vertical one 
grid.objBox.style.overflowX="hidden";
but it may be not the best solution. 
If issue still occurs in you case - please provide any kind of sample or link to demo page where it can be reconstructed ( you can send it to support@dhtmlx.com ) 

>>it covers the entire height of the grid
You have enableAutoHeight enabled - which means grid will resize to prevent inner scrollbar. The scrollbar which you see is a scroll of surrounding container and not related to the grid. 
To fit area and have only inner scrollbars you need to define width and height of grid's container as 100% and not use auto-width and auto-height modes.
Answer posted by Jim Soho on Jun 02, 2009 16:11
Hi,

Setting "width:100%; height:100%;" didn't work for me, on IE7 on initial load I see no grid. After resizing the window I do see the grid, but the grid doesn't resize.

I've been able to get it to work on all browsers by setting only style "width:100%;" on the gridbox div and using:

  mygrid.enableAutoHeight(true, "auto", false);


One more thing: when I resize the browser sometimes it leaves a gap the size of the width or height of a scrollbar. It doesn't fill up the entire area as it should. In FF it sometimes leaves the horizontal srollbar. If you then resize the browser just a tiny bit, slowly, then everything renders fine as it should (no gap and no horizontal scrollbar). I've been able to work around this by adding the following bit of javascript to my code:

   dhtmlxEvent(window,"resize",function(){
      window.setTimeout(function() {
        mygrid.setSizes();
      }, 100);
    });

With that bit of code it always renders correctly for me.


Thanks,
Jim
Answer posted by Support on Jun 03, 2009 02:23
>>One more thing: when I resize the browser sometimes it leaves a gap the size of the width or height of a scrollbar.
When both auto-height and auto-width modes enabled in grid - similar behavior can occur in some cases , latest version , with fix applied sent by email - you can try to use it instead of original one. 

>>on IE7 on initial load I see no grid
Most probably caused by surrounding layout - if it has a zero size on moment of grid initialization - grid can't detect sizes during initialization ( common case for rendering grid inside a table, when table is not fully loaded yet ) - in most cases it can be workarounded by moving grid initialization code to the onLoad handler of page. 
Answer posted by Jim Soho on Jun 05, 2009 05:37
The fix certainly improved things! After testing and refactoring and trying out various alternatives this is the best I came up with (see attachment; test this page by placing the file in /dhtmlxSuite/dhtmlGrid/samples/grids_manipulations). It works perfectly in Safari4 and FF for me. Note that the doctype turns out to be important!

In IE7 though I could not work around these two minor issues:

- After resizing the window a few times it can happen that a space the width of a scrollbar remains visible to the right. After that it remains visible no matter how you resize the window.

- If I don't specify mygrid.enableAutoHeight(true, "auto", false); in my javascript then in IE7 the grid will only show the header, not the body. Even though height:100% is specified for the gridbox div, and the containing div has a layout (as min-width and min-height are specified). As you can see in my attachment it also tries running it within the onload handler of the page.

Both issues are certainly no showstoppers for me, but I'd thought I'd mention it anyways as you might like to know. I'm happy as it is. Thank you!

Jim
Attachments (1)
grid_auto_height_and_width.html4.25 Kb
Answer posted by Support on Jun 05, 2009 08:05
>>- If I don't specify mygrid.enableAutoHeight(true, "auto", false);
Problem is in the next line
        <div style="min-width: 400px; min-height: 300px;">
IE7 doesn't recognize min-height css rule, so in IE 7 height of container equal to 0 , which cause problems. You can use existing way of grid's init , or define css rules as 
        <div style="min-width: 400px; min-height: 300px; height=300px; ">

where second part of css string will be correctly processed only by IE7, other browsers will ignore it

>>- After resizing the window a few times it can happen that a space the width of a scrollbar remains visible 
Unfortunately we can't reconstruct the same behavior locally