[2.0/2.0.1/2.1][OPEN] Grid autoHeight disables horizontal scrolling too

[DavidBlewett]

Just wanted to ping the devs that this is still a problem in 2.1. Condor's fix works for me.

[NOSLOW]

I've been using this fix and it appears to be causing some issues (some just in IE...Firefox is mostly ok). I was wondering if anyone else is having problems too.

The first problem was the appearance of a horizontal scrollbar in the grid when it's not actually needed. This scrollbar would cover most of that last row in the grid. Adding +2 to the vertical width of the scroller seems to solve this:

this.scroller.setSize(vw+2, vh);

The second problem has been with grids in IE appearing with the height of just one row with a vertical scrollbar. It's very awkward to scroll the grid rows in a "viewport" of a single row. The scroll arrows are very scrunched in the hight of that one row.

I noticed that one grid I have starts out hidden with no data, and an emptyText string displaying. It then becomes unhidden after the user saves the form to create a new record. When the grid appears, it's height is not enough to show the emptyText message fully (it's height is about the height of 1.5 rows, yet it looks like it's sized for just the height of 1 row). A vertical scrollbar shows in this case. After the user adds data to the grid, usually the row height starts behaving properly (autosizes) and tje vertical scrollbar goes away.

Checking for an empty grid when autoHeight and adding +20 to it's height seems to fix this issue:

        
    if(g.autoHeight){
            csize.height = this.mainHd.getHeight() + this.mainBody.getHeight();
            if (!this.forceFit) {
                csize.height += this.scrollOffset;
                csize.height += 30;
            }

          // account for emptyText height on empty grid.
            if (g.getStore().getCount() == 0) {
                console.log('+20 height');
                csize.height += 20;
            }
        }

Hopefully the devs will see this and take these two scenarios into account while developing a proper fix.

[berend]

Unfortunately the patch doesn't work in my case. I've a GridPanel embedded in a tab panel. Only setting an explicit height gets my both the horizontal and vertical scrollbar. autoHeight gets a grid that seems to have an unbounded height, so no scrollbars at all.

[mikhailt]

ExtJS 2.2.0 - problem is still here.
Grid's horizontal scrolling does not work if autoHeight is true.

I spend a couple of hours before I figured out that scrolling should work automatically and understand that this is a bug.

[mjack003]

Over a year later, and ...*drum roll*...bug still exists. Haven't seen any dev feedback in quite some time? Any plan on implementing condor's patch? anything at all?

Edit: Had a bit too much coffee. Love this library but this has been an annoying issue even before Ext came along. A fix would be great.

[mjack003]

@berend If you're going to nest an editGrid into a tab panel, wouldn't you want a fixed height? Otherwise, the user would (depending on rowcount) have to vertically scroll the panel body, just to find the horizontal scroll for the grid?

[dreas]

Any plan on implementing condor's patch?

Bump for attention. Is this going to be fixed in 3.0 at last?

[unordained]

The patch below works for me, at least in Firefox 3. It depends on the DOM property overflowX (come to think of it, it should probably set both overflowX and overflowY, in case you change autoHeight on the fly?) Restores scrolling, and keeps the headers synched with the body. The only changes (relative to 2.0) are in the autoHeight block.

Ext.override(Ext.grid.GridView, {
 layout : function(){
  if(!this.mainBody){
   return; // not rendered
  }
  var g = this.grid;
  var c = g.getGridEl(), cm = this.cm,
  expandCol = g.autoExpandColumn,
  gv = this;
  
  var csize = c.getSize(true);
  var vw = csize.width;
  
  if(vw < 20 || csize.height < 20){ // display: none?
   return;
  }
  
  if(g.autoHeight){
   // sufficient to get scrolling back
   this.scroller.dom.style.overflowX = 'auto';

   // without this, it scrolls but doesn't keep headers synched
   this.el.setWidth(csize.width);
   this.scroller.setWidth(vw);
   if(this.innerHd) {
    this.innerHd.style.width = (vw) + 'px';
   }
  }
  else {
   this.el.setSize(csize.width, csize.height);
   
   var hdHeight = this.mainHd.getHeight();
   var vh = csize.height - (hdHeight);
   
   this.scroller.setSize(vw, vh);
   if(this.innerHd){
    this.innerHd.style.width = (vw)+'px';
   }
  }
  if(this.forceFit){
   if(this.lastViewWidth != vw){
    this.fitColumns(false, false);
    this.lastViewWidth = vw;
   }
  }
  else {
   this.autoExpand();
   this.syncHeaderScroll();
  }
  this.onLayout(vw, vh);
 }
});

[BitPoet]

@berend If you're going to nest an editGrid into a tab panel, wouldn't you want a fixed height? Otherwise, the user would (depending on rowcount) have to vertically scroll the panel body, just to find the horizontal scroll for the grid?

There's also the possibility that the grid height doesn't even exceed below the visible area, but setting autoHeight: true has other components (bottom bar, components added after the GridPanel) appear as close to the top as possible. From my experience one of the main issues users found e.g. with earlier Java or Tk applications was the lack of reasonable autosizing of components, so I'm hell bent on not introducing that kind of clumsyness into my apps.

I'd also be really glad if this bug was resolved.

[Unholy]

Hello, I use the following patch. Can someone comment this patch?

Ext.override(Ext.grid.GridView, {
  layout : function() {
    if (!this.mainBody)
      return;

    var g = this.grid;
    var c = g.getGridEl();
    var csize = c.getSize(true);
    var vw = csize.width;
    if(vw<20 || csize.height<20)
      return;

    if (g.autoHeight) {
      this.scroller.setWidth(vw);
      if (Ext.isIE) {
        var scrollWidth = this.mainBody.dom.scrollWidth;
        if (scrollWidth>vw)
          this.scroller.setStyle("padding-bottom", this.scrollOffset+2);
        else
          this.scroller.setStyle("padding-bottom", 0);
        this.scroller.setStyle("overflow-y", "hidden");
      }
    }
    else {
      this.el.setSize(csize.width, csize.height);
      var hdHeight = this.mainHd.getHeight();
      var vh = csize.height - (hdHeight);
      this.scroller.setSize(vw, vh);
    }
    if (this.innerHd)
      this.innerHd.style.width = (vw)+'px';
    if (this.forceFit) {
      if (this.lastViewWidth!=vw) {
        this.fitColumns(false, false);
        this.lastViewWidth = vw;
      }
    }
    else {
      this.autoExpand();
      this.syncHeaderScroll();
    }
    this.onLayout(vw, vh);
  }
});