You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #11

  2. #12
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    13
    Vote Rating
    0
    dve is on a distinguished road

      0  

    Default

    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.

  3. #13
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default

    Try this, I HTH:

    PHP Code:
    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 
    0len this.config.lengthleni++) {
            if (
    includeHidden || !this.isHidden(i)) {
              
    this.totalWidth += this.getColumnWidth(i)+off;
            };
          };
        };
        return 
    this.totalWidth;
      }
    }); 

  4. #14
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    13
    Vote Rating
    0
    dve is on a distinguished road

      0  

    Default

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

    Code:
    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;
    	}
    });

  5. #15
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    62
    Vote Rating
    0
    ExtJSNinjas is on a distinguished road

      0  

    Default

    +1 thank you!

    Quote Originally Posted by seek View Post
    Try this, I HTH:

    PHP Code:
    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 
    0len this.config.lengthleni++) {
            if (
    includeHidden || !this.isHidden(i)) {
              
    this.totalWidth += this.getColumnWidth(i)+off;
            };
          };
        };
        return 
    this.totalWidth;
      }
    }); 

  6. #16
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,842
    Vote Rating
    146
    mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold

      0  

    Default

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

  7. #17
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    398
    Vote Rating
    71
    rich02818 is infamous around these parts rich02818 is infamous around these parts rich02818 is infamous around these parts

      0  

    Default

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

  8. #18
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,251
    Vote Rating
    485
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      0  

    Default

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

    Scott.

  9. #19
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default

    Awesome fix guys - much appreciated!

  10. #20
    Sencha User VDP's Avatar
    Join Date
    Feb 2012
    Location
    Boom, Belgium
    Posts
    88
    Vote Rating
    10
    VDP will become famous soon enough

      0  

    Default Awesome Fix

    awesome fix! thanx!!

    Quote Originally Posted by seek View Post
    Try this, I HTH:

    PHP Code:
    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 
    0len this.config.lengthleni++) {
            if (
    includeHidden || !this.isHidden(i)) {
              
    this.totalWidth += this.getColumnWidth(i)+off;
            };
          };
        };
        return 
    this.totalWidth;
      }
    });