Using Dashboard with Sidebar

[Nick]

I have a Sidebar control and I am trying to add Dashboard Layout control on a page. Whenever I view the mobile version of the page, the content of the dashboard layout panels are overflowing even after I use height: 100% and width: 100%.

I have attached a demo showing the issue.

Attachment: SidebarTest_37961301.7z

[LeoLavanya Dhanaraj]

Hi Nick,

Greetings from Syncfusion support.

We understand that you have rendered the Dashboard Layout panel inside the Grid div container. We can be able to replicate the panel content overflow issue in the mobile view. So, we have made some changes to your shared sample. To overcome the reported issue, you can set the overflow CSS property value to Auto. Refer to the below code snippet.

[Index.razor]

<DashboardLayoutPanel Id="three" Row="1" Column="0" SizeX=4 SizeY=2> …

    <ContentTemplate>

        <div class="e-container">

            <div style="height:100%;width:100%;overflow:auto"> … </div>

            …

        </div>

    </ContentTemplate>

</DashboardLayoutPanel>

<style>

    #three{

        overflow:auto;

    }

</style>

Check the below output screenshot.

Sample :  https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarTest-1554187950.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Nick]

Thank you for the update. Is there a way to remove the vertical sidebar on the right side of the dashboard layout(not the individual dashboard layout panels) that restricts the height of the dashboard?

[LeoLavanya Dhanaraj]

Hi Nick,

From your shared details, we were not clear about your exact requirement. Whether your requirement is want to adjust the Sidebar header width. If this is your requirement means, you can set the proper width to the corresponding CSS selectors. Refer to the below code snippet to adjust the width of the top navbar header in the Sidebar.

[MainLayout.razor]

<style>

    #header-section .header-style {

        …

        padding-left: 10px;

    }

 

    @@media(max-width:800px) {

        #header-section .nav-pane {

            width: 91.3%;

        }

    }

</style>

If we misunderstood your query, please share with us more details regarding your exact requirement. Do you want to remove the vertical scroll bar on the web page? Based on your confirmation, we will provide a prompt solution.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarTest549006675.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Nick]

Sorry for the typo, I want to remove the vertical scrollbar that restricts the height of the dashboard layout.

[LeoLavanya Dhanaraj]

Hi Nick,

Greetings from Syncfusion support.

Based on your confirmation, we have made some changes to our shared Dashboard sample. By setting the mediaQuery property as mobile device width, you can render the Dashboard Layout component as a predefined layout. You need to set the width value to be less than your required mobile device width size in the mediaQuery property.

As a result, the panel will adapt based on the available free space on your mobile device's width. For example, we have set the mediaQuery maximum width value to be less than the width of a mobile device in our shared sample, which will avoid the scroll bar. In a similar way, you can set the mediaQuery property based on your mobile resolutions. Refer to the below code snippet.

[Index.razor]

<SfDashboardLayout @ref="dashboardObject" … MediaQuery="max-width:459px">

</SfDashboardLayout>

Check out the output screenshot.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarTest-787385344.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

[Nick]

That makes the dashboard layout unusable as shown in the attached pic and file. 

I want them to be stacked in mobile screens but have the scrollbar on the right gone since that restricts the height of the dashboard layout.

Attachment: SidebarTest787385344_5c2dfa47.zip

[LeoLavanya Dhanaraj]

Hi Nick, 

Currently We are validating the reported query in the Blazor Dashboard Layout component. But we need some additional time and will update you with further details on August 17, 2022. We appreciate your patience.

Regards,

Leo Lavanya Dhanaraj

[Nick]

Can I get an update on this?

[LeoLavanya Dhanaraj]

Hi Nick,

Sorry for the inconvenience. We are facing some difficulties to meet your requirement, and we are validating this query with high priority. But we need some additional time to validate and will provide an update on or before August 23, 2022.

We appreciate your patience.

Regards,

Leo Lavanya Dhanaraj

[LeoLavanya Dhanaraj]

Hi Nick,

Thanks for your patience.

We have validated your reported Dashboard Layout component issue in the Blazor platform. On resizing the browser window, the width and height of the Dashboard Layout panel(same width and height are set for each panel) will decrease to adapt to the current screen dimension. Currently, we do not have support to maintain the same height for the dashboard panels on window resize. Based on this query, we have already considered this as a feature from our end. Support for this feature will be included in any of our upcoming releases.

Usually, Syncfusion will plan and implement the features based on feature rank, customer requested count, and volume wish-list. We will let you know when this feature is planned for upcoming releases. The status of the implementation can be tracked through the below portal link.

https://www.syncfusion.com/feedback/30501/need-to-improve-the-rendering-of-mobile-stack-layout-based-on-parent-height-in-the

Please get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj