Problem when resizing panels with a large number of columns

[Angel Peraza]

Hello, I'm experiencing a resizing bug in a vue dashboard. When the browser is in windowed mode (not maximized), resizing a dashboard panel causes it to scale indefinitely/glitch out.

We're Using a 48-column layout for finer control, I'd appreciate any advice on how to stabilize the resize behavior under these conditions.

<div style="">

<ejs-dashboardlayout

v-if="loaded"

id="defaultLayout"

ref="dashboard"

:cellSpacing="dashboardSettings.spacing"

:columns="48"

:showGridLines='true'

:allowResizing="dashboardSettings.allowResizing"

:allowFloating="false"

@resizeStart="onPanelResize"

@resizeStop="onPanelResizeStop"

@dragStart="onPanelDrag"

@dragStop="onPanelDragStop"

>

<e-panels>

<e-panel v-for="(panel, index) in panels" :id="panel.id" :key="panel.id" :sizeX="panel.sizeX" :sizeY="panel.sizeY" :col="panel.col" :row="panel.row"

:header="panel.placeholder_id+'_header'" :content="panel.placeholder_id+'_content'"

>

<template v-slot:[panel.placeholder_id+'_header']>

<div class="content" style="font-weight: bold;">

<span>{{panel.title}}</span>

</div>

</template>

<template v-slot:[panel.placeholder_id+'_content']>

<component

:key="'index_'+panel.widget_id"

:is="getComponent(panel.panel_type)"

:chart_name="panel.title"

:widget_id="panel.widget_id"

:widget_user_id="panel.widget_user_id"

/>

</template>

</e-panel>

</e-panels>

</ejs-dashboardlayout>

</div>

[Praveen Sellappan]

Hi Angel Peraza,

Greetings from Syncfusion Support!

We have prepared a local sample in which we have configured all the properties and events exactly as shown in the image you shared. However, we are quite unclear about the “glitch out” issue you mentioned.

We have attached the sample for your reference:

Sample: https://stackblitz.com/edit/dxggpnkf-k3t25bp7?file=src%2FApp.vue

Kindly review this sample and check whether it aligns with your implementation.

If the sample does not match your implementation or if the issue still persists, please provide the following details to help us investigate the issue further:

• Version of the Syncfusion packages you are using
• Clear steps to replicate the issue
• A video reproducing the issue.
• Are you experiencing any lag or delay while resizing the panels.
• Does the issue reproduce in the sample we shared.
• If possible, a minimal reproducible sample that shows the problem

These details will greatly help us identify and resolve the issue quickly. Thank you for your cooperation. We look forward to your response!

Regards,

Praveen Sellappan

[Angel Peraza]

Hi! Thanks for your reply.

I tried to replicate the issue using your example but I was not able to reproduce it. However, I'm sharing a vide that illustrates the problem we are experiencing.

I would also like to clarify that the dashboard is embedded within an iframe in our application in case this could be related to the issue.

Additionally I'm sharing the syncfusion versions we are currently using.

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

├── @syncfusion/[email protected]

[Praveen Sellappan]

Hi Angel Peraza,

Thank you for the update.

However, we are still unclear about the exact meaning of “glitch out” in this context. Additionally, we did not receive the video attachment in your last message.

To help us better understand and reproduce the behavior on our side, could you please:

• Attach and share the issue replication video
• Describe or share how you have implemented the Dashboard component inside an iframe (relevant code/configuration details)
• If possible, try to reproduce the same behavior using the sample we shared earlier and let us know the outcome

These details will allow us to investigate the reported behavior more effectively.

Regards,

Praveen Sellappan