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
    San Diego->Boston->Brazil
    Vote Rating
    Juanito is on a distinguished road


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


    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" "">

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

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


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


    Steps to reproduce the problem:
    • Go to
    • 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!/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:

      Ext.create('', {
        fields:['name', 'email', 'phone'],
            { 'name': 'Lisa',  "email":"",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"", "phone":"555-222-1254"  }
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        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;


    Screenshot or Video:
    • See description

    See this URL for live test case:

    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