Our system has a simple component for a “tag” that is effectively stylized text. We’d like to display all of the tags for a record in single cell without cropping. It looks like the Bryntum grid crops the tags by default. When we add css to allow wrapping, all of the tags render but it’s not pretty or readable. When add the css wrapping along with an auto-height setting, it’s also not acceptable. See the screenshots below that illustrate what we are talking about.
Do you have any suggestion on what we can do to give us the desired look?
Attachments
default view
normal.png (32.4 KiB) Viewed 303 times
add CSS to wrap
css-to-wrap.png (61.95 KiB) Viewed 303 times
add CSS to wrap & add autoHeight
css-to-wrap-w-autoHeight.png (28.94 KiB) Viewed 303 times
{
... Other configurations
cellCls : 'chip-row',
autoHeight : true,
renderer() {
// this return is just for example purposes
return `<div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div> <div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div>`;
}
}
PS: I added some extra UI CSS to the chip class to look better, but the only mandatory property is a margin vertically to avoid the chips being too close when wrapped.
Attachments
Screen Shot 2022-07-05 at 5.08.40 PM.png (85.14 KiB) Viewed 301 times