Overlapping Panel

[Andrew Fraser]

I am using the dashboard layout control which appeared to be working fine but now I see that my second panel keeps overlapping the bottom of the first panel.

The code for this is:

<SfDashboardLayout @ref="_dashboardObject" Columns="5" AllowResizing="true">

        <DashboardLayoutPanels>
            @if ( _areSysAdmin )
            {
                <DashboardLayoutPanel Id="userstatus" SizeX="4" SizeY="1" Column="0" Row="0">
                    <HeaderTemplate>User Status</HeaderTemplate>
                    <ContentTemplate>
                        <UserStatusDashboardComponent />
                    </ContentTemplate>
                </DashboardLayoutPanel>

                <DashboardLayoutPanel Id="usermessages" SizeX="3" SizeY="1" Column="0" Row="2">
                    <HeaderTemplate>User Messages</HeaderTemplate>
                    <ContentTemplate>
                        <UserMessagesDashboardComponent />
                    </ContentTemplate>
                </DashboardLayoutPanel>
            }
        </DashboardLayoutPanels>
    </SfDashboardLayout>

Not sure what I have done - can anyone help?

Andy

[Andrew Fraser]

Strange, I did some changes elsewhere in my code, re-deployed my app and now it seems to work again !

Not sure what is going on.

 Andy

[Priyanka Karthikeyan]

Hi Andrew Fraser,

When dynamically rendering DashboardLayoutPanel components, panels may overlap if not configured correctly. This issue typically occurs when multiple panels are assigned the same Id property. The Dashboard Layout component uses this Id internally to uniquely identify and manage each panel’s position and state. If Id values are duplicated, the component treats these panels as the same instance, causing them to render in the same location (e.g., Row = 0, Column = 0) and visually overlap.

To ensure each panel renders independently in its specified location, assign a unique Id to every DashboardLayoutPanel.

For more information, please refer to the below UG documentation

Prevent Panel Overlap in Blazor Dashboard | Syncfusion

Regards,

Priyanka K

[Andrew Fraser]

Priyanka,

Thanks for the response. As you can see in my code, each panel does have a unique ID.

At present it seems to be working fine - not sure what I did to fix it.

Best Regards

[Priyanka Karthikeyan]

Hi Andrew Fraser,

Thank you for the update.

We understand that you were experiencing panel overlap issues in your dashboard layout. Since each panel has a unique ID assigned, we initially looked into potential causes for this behavior. However, we note that the issue has now resolved automatically on your end.

Based on your observation, this may have been related to a caching issue that has since cleared. To help prevent such issues in the future, we recommend the following steps:

1. Delete NuGet Caches: Before adding any package to your application, please delete the NuGet caches in your project.
2. Remove Previous Installation: Delete any previously installed Syncfusion NuGet packages, along with the bin and obj folders from your project location.
3. Reinstall the Package: Navigate to the Browse section, locate the Syncfusion Blazor package, and install it fresh.
4. Rebuild Your Solution: Run a clean solution followed by a rebuild.
5. Test in Incognito Mode: Run the sample application in incognito/private browsing mode to ensure no browser cache interference.

Should you encounter this or any other issue in the future, please don't hesitate to reach out. We will be happy to assist you further.

Regards,

Priyanka K