I have an ExtJS ListView control with 4 columns. One of the columns contain text which extends the width of the column, thus some of the text are located beneath the next column.
How can I set white-space
to normal
for the cells in the listview?
This should be in your column definition:
{
header: 'Besked',
dataIndex: 'besked',
tpl: '<p style=\"white-space:normal\";>{besked}</p>'
}
Sdavids solution works and I voted for that.
But just in case you prefer using a css class instead of styles this is how:
{
header: 'Besked',
dataIndex: 'besked',
cls: 'listViewColumnWrap'
}
Then you need this line in some css file:
.listViewColumnWrap { white-space:normal; }
This is a cross-browser way to override the default css classes to make all of your list views, grids, and combobox select menus all wrap their text content:
.x-list-body dt {white-space: normal;}
.x-list-body dt em { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-grid3-row-flag { white-space: normal; background-color: #ffc; }
.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; }
.x-grid3-cell-inner { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-combo-list-inner .x-combo-list-item { white-space: normal; }
.x-combo-list-item { white-space: pre-wrap !important; word-wrap: break-word !important;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With