GWT grid cells don’t wrap

I’m using a GWT GridPanel. I want one of the columns to wrap but nothing I’ve tried works. In the associated css file, I’ve tried:

.x-grid3-cell-inner .x-grid3-col-note {
    overflow: visible; white-space: normal !important;
}

where note is the name of the column that I want to wrap. Didn’t work. I’ve tried:

.x-grid3-cell {
    white-space:wrap;
}

Didn’t work. I’ve tried:

.x-grid3-cell-inner {
    cell-wrap: true;
}

Didn’t work. Anyone have a simple solution that works?

EDIT: I also tried setting the id in the ColumnConfig like this:

ColumnConfig[] columns = new ColumnConfig[] {
        new ColumnConfig("Note", "note", 130, true, null, "note"),
        new ColumnConfig("Date", "date", 65, true)
};

ColumnConfig c = columns[0];
c.setId("noteColumn");

Then in the css I added:

#noteColumn {
    overflow: visible; white-space: normal !important;
}

But that didn’t work either.

Answer

This is a GWT-Ext widget. In the documentation there are some examples on how to wrap cell contents.

For example, use this to wrap all cell contents globally

 .x-grid3-cell-inner {
      overflow: visible; white-space: normal !important;
 }

You can use setId() method in ColumnConfig:

Assigning id to ColumnConfig results in the column dom element having that ID. This is useful to apply custom css to the entire column.

If id = note then css rule should be:

.x-grid3-col-note {
      overflow: auto; white-space: normal !important;
 }

Leave a Reply

Your email address will not be published. Required fields are marked *