Threaded View

    This duplicates another bug already reported in our system: EXTJS-8157
  1. #1
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    160
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default Using word-wrap:break-word in GridPanels breaks hidden columns

    Using word-wrap:break-word in GridPanels breaks hidden columns


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3 (Using live examples from sencha's current doc)

    Browser versions tested against:
    • Chrome
    • IE9
    • Firefox ESR 10.0.6

    DOCTYPE tested against:
    • <!DOCTYPE html>
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Description:
    I wanted to break words in a grid so they wrap by breaking long words using

    Code:
     .x-grid-cell-inner {
        white-space: normal;
        word-wrap: break-word;
    }
    This works fine until the column is hidden.

    word-wrap-break-word.png

    As soon as I hide a column (using the columns menu) that has wrapped , the column is hidden but each row becomes really tall.

    word-wrap-break-word-broken.png

    Steps to reproduce the problem:
    • Go to http://jsfiddle.net/jRyUQ/
    • Notice that the email column is wrapping to show the full email in a new line
    • Hide the Email column from the column menu

    Note that you can also easily reproduce it from http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel by modifying the CSS dynamically using the CSS I posted above and reproducing the same steps. That is why I tagged this as 4.1.3 instead of 4.1.1 which was used in the jsfiddle.

    The result that was expected:
    • Each row has the height of just one line

    The result that occurs instead:
    • Each row becomes as tall as there are letters in the hidden column

    Test Case:

    Code:
      Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email'},
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });​
    
    .x-grid-cell-inner {
        white-space: normal;
        word-wrap: break-word;
    }

    HELPFUL INFORMATION


    Screenshot or Video:
    • See description

    See this URL for live test case: http://jsfiddle.net/jRyUQ/


    Debugging already done:
    It looks like the columns are hidden by setting width:0, the overflowing text is not displayed but it's still taking up space in the td

    Possible fix:
    Also set the height of the td/div to 0?

    Additional CSS used:
    .x-grid-cell-inner {
    white-space: normal;
    word-wrap: break-word;
    }


    Operating System:
    • Windows 7
    Last edited by Juanito; 4 Jan 2013 at 12:53 PM. Reason: minor typos and formatting