Page 1 of 1

[VUE 3] Cell Wrapping with Components

Posted: Tue Jul 05, 2022 8:24 pm
by trudog

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:


.chip {
    margin: 5px;
}
.chip-row {
	flex-wrap: wrap;
}

Then, you need to configure the column like this:

{
            ... 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.