Our flexible Kanban board for managing tasks with drag drop


Post by rodel.ocfemia »

Hi,
I am trying to create a template headerItem where width should be set to 100% so that card content will be responsive when card changes size. The headerItem will contain an icon positioned at upper left side, a description text at upper middle, then an icon again at upper right side.

But somehow the width is not changing. If I changed it to fixed width (eg width:200px), it worked.

headerItems: {
	text: { type: 'template', template: ({ taskRecord }) => `<div style="width:100%;border:1px solid red;">test</div>` },
}

I tried putting this code in a blank page with no brytum and it also worked.

<div style="width:100%;border:1px solid red;">test</div>

Thank you in advance.


Post by marcio »

Hey rodel.ocfemia,

To work with relative width, you need to also update the header container to make it responsible, you can do it in two ways:

headerItems : {
        text : {
            type     : 'template',
            template : ({ taskRecord }) => `<div style="width:100%;border:1px solid red;">test</div>`,
            // Option 1: Add a 'full-width' class with CSS width: 100%
            cls      : 'full-width',
            // Option 2: Add directly the width: 100% style
            style    : {
                width : '100%'
            }
        }
    },

Best regards,
Márcio


Post by rodel.ocfemia »

Hi marcio,

Thanks a lot for your quick response. Option 2 solves my issue.


Post Reply