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?
Re: [VUE 3] Cell Wrapping with Components
Posted: Tue Jul 05, 2022 10:11 pm
by marcio
Het trudog,
You need to set up two CSS classes, one for the cell (that will be the container), and the other for the chips:
{
... 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.