[Resolved] Add bold, color tags to content breaks up cell

[gregc]

While using a custom renderer to return HTML. If I return text with <br/> it displays as expected due to using the

<style>.b-grid-cell[data-column='f5'] {	white-space: normal;}</style>

However if I add some tags e.g. <b>bold me</b> or color tags it breaks up the cell into a new subsection and places it to the right.

Is there a CSS class I can override or some property I can prevent that behaviour
example
https://plnkr.co/edit/M8gCgYEESQqLhj2v?open=lib%2Fscript.js&preview

It is supposed to look like: https://i.ibb.co/bFfV1Vk/image.png

[pmiklashevich]

Please try to provide minimal info required to reproduce the issue when producing a testcase. Regarding your case, just wrap your output in <span> block.

import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';

new Grid({

appendTo : 'container',

minHeight : '20em',

rowHeight : 200,

columns : [
    {
        text       : 'Action',
        field      : 'f5',
        width      : 100,
        htmlEncode : false
    }
],

data : [
    {
        f5 : '<span>Type new interface transaction into Display field<br/><b>[Details]</b><br/>Type new interface transaction description into Description field<br/><b>[Details2]</b><br/>Leave 0 in Sequence field</span>'
    }
]
});

Plus css of cause

<style>.b-grid-cell[data-column='f5'] {white-space: normal;}</style>

Cheers!

[gregc]

Awesome, looks great now thanks.