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,366
    Vote Rating
    62
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      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.
    Get on the Fast Track with Sencha Training http://sencha.com/training

    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi