SfDashboardLayout in SfTab covers the right tab

[Castandet Cyril]

hi,

I have attached a very simple example to reproduce a graphic bug that I have since updated my nuggets packages to V27.

From memory I did not have the problem in v25.

This is a simple structure.

A sftab with 2 tabs, the first contains a sfDasbaordLayout and the second contains another sfTab.

The bug is on the first tab where I see that the panels are too big and overflow on the header of the tab. We can see that there is no border left on the left of my icon (red circle on the first image).

We can see on the second image that everything is displayed correctly (green circle on the second image).

How can I fix my problem please?

The margin and padding do not change anything.

thx

Attachment: GraphiquesDashboard_a09b019c.zip

[SureshRajan Alagarsamy]

Hi Castandet,

We have reviewed your query regarding the overflow issue you are experiencing with the Dashboard Layout component when integrating inside the Tabs component. Based on the provided code snippet details, we have created a sample and were unable to replicate the overflow issue. The Dashboard Layout component adapts correctly within the Tab component, and there was no overflow observed in the Tab header element.

For your convenience, we have attached the tested sample for your review.

Sample: Attached as zip folder.

Additionally, we have included a video demonstration showcasing the expected behavior of the components in the scenario you described.

Video Footage: Attached as zip folder.

We suspect that the issue may be related to browser caching after updating to a newer version. If you are using a CDN for your scripts, please ensure it is updated to the latest version. If the problem continues, we recommend removing the bin and obj folders from your project, then rebuilding and clearing your browser cache.

Regards,
Suresh.

Attachment: BlazorWebAppTabDashboardLayout_c7f1a2f7.zip

[Castandet Cyril]

I just realized your recommendations:

- Deleting the "bin" and "obj" folders

- Deleting cache and data/cookies etc from Chrome

- Checking the versions of Syncfusion packages (all in V27.1.52)

- Checking CDNs (I don't use any)

Test on Chrome: problem still present

Test on Edge: it's ok.

I don't see what could happen :(

[LeoLavanya Dhanaraj]

Hi Casrandet,

Thank you for the details. To replicate the mentioned issue, we tested the shared sample by changing various screen resolutions and browsers, but the Dashboard Layout component adapts correctly within the Tab component. Finally, we recommend that you try clearing your NuGet cache, as described in the knowledge base link below, and ensure that you are using the latest package versions and its scripts, styles links. Additionally, please share your screen resolution and device details. This information will help us investigate further.

NuGet cache clear : https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache

Regards,

Leo Lavanya Dhanaraj

[Castandet Cyril]

As noted, I cleared the nuggets packages cache.

The problem remains the same.

On Edge: everything is ok.

On Chrome - Version 130.0.6723.70 (Official Build) (64 bits) -: the problem is still present.

I have 3 monitors:

 - Chrome displayed in full screen

- scaling: 100%

*First monitor: Dell 24" 1920x1080: Problem present

*Second monitor: Samsung 22" 1920x1080: Problem present

* Third monitor: Dell XPS 15" 1920x1200 laptop: no problem!

On screens where the problem persists, if I switch to full full screen mode (F11), the problem disappears.

I exit full full screen mode, the problem does not return.

But, if I refresh the page (F5) the problem returns.

If I minimize my browser, about 50% of the total display,

Here's what's happening:

sfGrid overflows on tab, but not the dashboard panel.

FYI I use the fluent theme, added in _Host:

<link rel='nofollow' href="css/fluent.css" rel="stylesheet" />

I hope this will help you.

[SureshRajan Alagarsamy]

Hi Castandet,

After further investigation, we were able to replicate the issue you reported. To resolve this scenario, we recommend calling the RefreshAsync method of the Dashboard Layout component with a slight delay within the Created and Selected event handlers of the Tab component. This approach will allow the Dashboard Layout to render properly without any overflow issues in the Tab component content.

Refer to the below code snippet for further reference.

[Index.razor]

<SfTab ShowCloseButton="false" HeaderPlacement="HeaderPosition.Right" Width="100%" Height="100%">

    <TabEvents Created="OnCreated" Selected="OnSelected"></TabEvents>

    <TabItems>

        <TabItem ID="dashboardtab">

            <ChildContent>

                <TabHeader IconCss="sf-icon-bar-charts-wf"></TabHeader>

            </ChildContent>

            <ContentTemplate>

                 <SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[]{15 ,15 })" CellAspectRatio="1" Columns="8" AllowResizing="true">

                  .....

                  </SfDashboardLayout>

        </TabItem>
        ......

     </TabItems>

</SfTab>

@code{

public SfDashboardLayout dashboard;

public List<Order> Orders { get; set; }

public void OnCreated()

{

    dashboard.RefreshAsync();

}

public async Task OnSelected(SelectEventArgs args)

{

    await Task.Delay(500);

    if(args.SelectedIndex == 0)

    {

        await dashboard.RefreshAsync();

    }

}

....

}

We have also attached a solution sample for your reference.

Sample: Attached as zip folder.

Regards,
Suresh.

Attachment: BlazorDashboardLayoutTab_b5f62f84.zip

[Castandet Cyril]

hi,

Your solution is ok ! thx !

[Kalpana Ganesan]

Hi Cyril,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.