[INFO REQ] Word Wrap within Column

[dmnewnham]

Hi. I have dynamic row height working (large row height for long text in my column). Is it possible to use a renderer to wrap the text so it all appears in the higher column.

eg.

renderer: function({value}) {
    return `<span style="color: blue; font-weight: bold; word-wrap: normal">${value}</span>`
}

returns blue and bold text but no word-wrap; the text just extends off outside of the column width.

[pmiklashevich]

Hello,

Words are not wrapped by lines because of the css rule on the b-grid-cell class. It sets white-space to nowrap. You can override it in css. For example to override it for a specific column:

.b-grid-cell[data-column="name"] {
	white-space: normal;
}

    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            },
            htmlEncode : false,
            renderer({ value }) {
                return `<span style="color: blue; font-weight: bold;">${value}</span>`;
            }
        }, {

Cheers,
Pavel

[dmnewnham]

Awesome. Applied and working. Thanks again!

[gregc]

Hello,

Words are not wrapped by lines because of the css rule on the b-grid-cell class. It sets white-space to nowrap. You can override it in css. For example to override it for a specific column:

.b-grid-cell[data-column="name"] {
	white-space: normal;
}

Cheers,
Pavel

Thanks thats a very simple fix that saved me a lot of work.

[akuang]

Hi @pmiklashevich,

I am attempting to utilize this same method for Bryntum Gantt v4.0.8, but it does not seem to allow the text to wrap as expected.
There also appears to be fixed height value set for .b-grid-row along with overflow:hidden which prevent any wrapped text from being displayed. Though, setting that height to auto and remove the overflow still will not get this to work as expected.
Any other suggestions on how to have the name column text wrap and be visible? We have some very long task names that would benefit greatly from this simple improvement. Thanks!

[johan.isaksson]

Hi,

Unfortunately Gantt does not support variable row height, its layout calculations currently requires a fixed row height. And at this point we have no plans to add such support.