Grids are rendered differently in upcoming versions of Google Chrome

[dve]

https://code.google.com/p/chromium/i...tail?id=124816

[dve]

It seems that both chrome and FF are dealing with box-sizing incorrectly. Its just that FF is more consistently incorrect.


The W3C spec says that box-sizing applies to 'all elements that accept width or height'


See this example: https://gist.github.com/2709126


box-sizing seems have no effect on the table even though it has a border of 5px. Surprisingly only IE10 seems to render correctly.

[seek]

Try this, I HTH:

Ext.grid.ColumnModel.override({
  getTotalWidth: function(includeHidden) {
      var off = 0;
      if(!Ext.isDefined(Ext.isChrome19)){
        Ext.isChrome19 = /\bchrome\/19\b/.test(navigator.userAgent.toLowerCase());
      };
      if (Ext.isChrome19){
          off = 2;
      };
    if (!this.totalWidth) {
      this.totalWidth = 0;
      for (var i = 0, len = this.config.length; i < len; i++) {
        if (includeHidden || !this.isHidden(i)) {
          this.totalWidth += this.getColumnWidth(i)+off;
        };
      };
    };
    return this.totalWidth;
  }
}); 

[dve]

Thanks seek. I came up with an almost identical solution earlier.

Ext.chromeVersion = Ext.isChrome ? parseInt(( /chrome\/(\d{2})/ ).exec(navigator.userAgent.toLowerCase())[1],10) : NaN;


Ext.override(Ext.grid.ColumnModel, {
	getTotalWidth : function(includeHidden) {
		if (!this.totalWidth) {
			var boxsizeadj = (Ext.isChrome && Ext.chromeVersion > 18 ? 2 : 0);
			this.totalWidth = 0;
			for (var i = 0, len = this.config.length; i < len; i++) {
				if (includeHidden || !this.isHidden(i)) {
					this.totalWidth += (this.getColumnWidth(i) + boxsizeadj);
				}
			}
		}
		return this.totalWidth;
	}
});

[ExtJSNinjas]

+1 thank you!

Try this, I HTH:

Ext.grid.ColumnModel.override({
  getTotalWidth: function(includeHidden) {
      var off = 0;
      if(!Ext.isDefined(Ext.isChrome19)){
        Ext.isChrome19 = /\bchrome\/19\b/.test(navigator.userAgent.toLowerCase());
      };
      if (Ext.isChrome19){
          off = 2;
      };
    if (!this.totalWidth) {
      this.totalWidth = 0;
      for (var i = 0, len = this.config.length; i < len; i++) {
        if (includeHidden || !this.isHidden(i)) {
          this.totalWidth += this.getColumnWidth(i)+off;
        };
      };
    };
    return this.totalWidth;
  }
}); 

[mankz]

Bump, +1 for getting this resolved as it's now in the wild (affecting our users of Scheduler/Gantt 1.x).

[rich02818]

+1 also, we can't allow fielded systems to break due to lack of support...

[scottmartin]

I see there is a new release of Chrome. I have not downloaded and tested. Hopefully this will fix things.

Scott.

[willigogs]

Awesome fix guys - much appreciated!

[VDP]

awesome fix! thanx!!

Try this, I HTH:

Ext.grid.ColumnModel.override({
  getTotalWidth: function(includeHidden) {
      var off = 0;
      if(!Ext.isDefined(Ext.isChrome19)){
        Ext.isChrome19 = /\bchrome\/19\b/.test(navigator.userAgent.toLowerCase());
      };
      if (Ext.isChrome19){
          off = 2;
      };
    if (!this.totalWidth) {
      this.totalWidth = 0;
      for (var i = 0, len = this.config.length; i < len; i++) {
        if (includeHidden || !this.isHidden(i)) {
          this.totalWidth += this.getColumnWidth(i)+off;
        };
      };
    };
    return this.totalWidth;
  }
});