Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2014
    Posts
    3
    Vote Rating
    0
    oyster is on a distinguished road

      0  

    Default [4.2.2] Grid column autoSize() results in cropped column title in Chrome

    [4.2.2] Grid column autoSize() results in cropped column title in Chrome


    Ext version tested:
    • Ext 4.2.2 rev 1144
    Adapter used:
    • ext
    css used:
    • only default ext-all.css
    Browser versions tested against:
    • Chrome 34.0.1847.116 m
    Operating System:
    • Windows 8.1 Enterprise x64
    Description:
    • When calling autoSize() method on Ext.grid.Panel column and when this column has values with text shorter than column title, title gets cropped in Chrome - few last chars are replaced with ellipsis.
    • Works fine in IE, FF.
    • This issue is present in ExtJS 4.2.2 only, works fine in 4.2.0, 4.2.1.
    • Issue is present when using ExtJS CSS file "ext-theme-classic-all-debug.css".
    Test Case:


    Code:
    // Assuming you have <div id="grid-with-autosize"></div> somewhere in your HTML
    Ext.onReady(function(){
        var column = Ext.create('Ext.grid.column.Column', {
            text: "Example Title",
            dataIndex: 'Value'
        });
    
    
        Ext.create('Ext.grid.Panel', {
            store: {
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json'
                    }
                },
                fields: [ 'Value' ],
                data: [ { Value: '1' } ]
            },
            columns: [ column ],
            renderTo:'grid-with-autosize',
            listeners: {
                afterrender: function() {
                    column.autoSize();
                }
            }
        });
    });
    See this URL : http://jsfiddle.net/aSmyH/3/. Note: There's no public CDN for ExtJS 4.2.2 so custom CSS was added to mimic 4.2.2 styles.

    Steps to reproduce the problem:
    • Create new 'Ext.grid.Panel' with any columns and data
    • Ensure that some of those columns having title longer than any cell value
    • Invoke autoSize() on column(s) matching criteria above
    The result that was expected:
    • Column title is not cropped in Chrome, all the title characters are visible
    • There is no ellipsis at the end of column title
    The result that occurs instead:
    • Column title is cropped in Chrome - few last chars are replaced with ellipsis
    Screenshot or Video:
    • attached
    Debugging already done:
    • Issue was introduced because style was changed for "x-column-header-text" class (in "ext-all.css") - "display: inline-block" part was removed in ExtJS 4.2.2. At least, grid works fine if this style change is reverted back.
    • Probably not reproducible in IE, FF because in those browsers columns are 6px wider due to Ext.support.ScrollWidthInlinePaddingBug == true and corresponding width adjustment
    Possible fix:
    • Update sources for "ext-theme-classic-all-debug.css" so that CSS generated for "x-column-header-text" class will look like this (changes are in red):
      Code:
      .x-column-header-text {
          white-space: nowrap;
          background-repeat: no-repeat;
      
          display: inline-block;
      }
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,106
    Vote Rating
    59
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    I see the issue in your JSFiddle, but not anywhere else. When I run your code against 4.2.1, 4.2.2, or a recent 4.2.3 nightly, the column header resizes correctly.
    https://fiddle.sencha.com/#fiddle/55e

    Also, if I remove the CSS from your JSFiddle, it also runs as expected. Perhaps I've missed something.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Apr 2014
    Posts
    3
    Vote Rating
    0
    oyster is on a distinguished road

      0  

    Default


    It's still reproducible for me with ExtJS 4.2.2 and "ext-theme-classic-all.css". Maybe we use an old build? The one we currently use is 4.2.2.1144.

    What 4.2.2 build have you tried to reproduce it on?

    PS: Sorry for big delay with answer - I found time to return to this problem only now

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    30
    Vote Rating
    2
    agarberi is on a distinguished road

      0  

    Default


    We are having exactly the same issue with 4.2.3.1398 (20140421 nightly beta).

    As a temporary fix we added this override to Ext.view.Table, although it will uncorrectly add space also if the content is wider than the title.

    Code:
        getMaxContentWidth: function (header) {
            return this.callParent(arguments) + (Ext.isChrome ? 5 : 0);
        }

  5. #5
    Sencha User
    Join Date
    Apr 2014
    Posts
    3
    Vote Rating
    0
    oyster is on a distinguished road

      0  

    Default


    Have you tried fix proposed by me, the one done via CSS? It should work as well.

Thread Participants: 2