1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Show vertical scrollbar for dashboard layout

Show vertical scrollbar for dashboard layout

Is there a way to show a scrollbar on the dashboard container when it exceeds the height?

I can add overflow auto to the container but the vertical scrollbar width is not considered when calculating the width of the panels, causing a horizontal scrollbar to be displayed as well.

Is there a way I can display only a vertical scrollbar?



13 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team January 13, 2021 01:05 PM UTC

Hi Hosney, 
 
We have validated you reported query but unable to reproduce the reported issue. Please find our validation sample from the below link, 
 
 
By default, Dashboard panels will get adjusted based on the container width. When the panels exceed the default height, vertical scrollbar will be added but horizontal scroller will not be maintained on the page.  
 
Please find the below video footage for reference. 
 
 
Please share us the steps or code snippets to replicate the issue. If possible reproduce the issue in the attached sample to assist you promptly. 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


HO Hosney January 13, 2021 01:43 PM UTC

Thanks for the quick reply. I've forked your demo to show the issue.




MS Muthukumar Settu Syncfusion Team January 14, 2021 03:44 PM UTC

Hi Hosney, 
 
Thanks for the update. 
 
We have checked your shared sample link. Unfortunately, we were unable to open check this your issue in the sample link as it is not in runnable state.  So, please share us the correct forked sample link and also share us the steps and code snippets to replicate your reported problem in our end. 
 
Please refer the output image of your last shared link. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,
Muthukumar S 


HO Hosney January 15, 2021 04:36 AM UTC

Basically what I did was add the following css to the demo link provided by Indumathy.

.control-section {
              width: 800px;
              height:400px;
              overflow:auto;
            }


IL Indhumathy Loganathan Syncfusion Team January 18, 2021 10:11 AM UTC

Hi Hosney, 
 
We have validated your requirement with DashboardLayout component. By default, dashboard panels width and height will be inherited from its parent container. 
 
To achieve your requirement, you can add a div block for the dashboard control-section. You can add the necessary stylings to the div to achieve vertical scroll bar. 
 
Please refer to the below code snippets, 
 
.container-block { 
              width: 850px; 
              height: 400px; 
              overflow: auto; 
              padding: 20px; 
} 
 
<div class="container-block"> 
              <div class="control-section">... 
              </div> 
</div> 
 
Please find the modified sample, 
 
 
Please, check out the following links to know more about EJ2 Dashboard Layout component and its functionalities. 
 
 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

HO Hosney January 18, 2021 03:45 PM UTC

Unfortunately this only works if you leave enough space for the scrollbar in the container block width. What I need is for the content to fit the width of the container without any gaps.

For example if you use a style like this and remove the panels until there is no vertical scrollbar you will see a gap between the border and the panel. If you increase the width of the control-section to fit the container (e.g. control-section width 840px) you will have the horizontal bar issue again.

.container-block {
        width: 850px;
        height: 400px;
        overflow: auto;
        border: 1px solid black;
      }

      .control-section {
        width: 840px;
        height: 300px;
      }







IL Indhumathy Loganathan Syncfusion Team January 19, 2021 06:31 AM UTC

Hi Hosney, 
 
As mentioned in our previous update, the Dashboard panels width and height will be adjusted based on its parent div (which is control-section). Adjusting the width of the control-section class, will affect the dashboard panels width as well. 
 
But you can avoid the gap between the panel and scroll bar by adjusting the width of the container-block class. 
 
Please refer to the below code snippet, 
 
.container-block { 
    width: 817px; 
    height: 400px; 
    overflow: auto; 
} 
 
Please find the modified sample from below link, 
 
 
If we misunderstood your query, kindly share us the details regarding your exact requirement on Dashboard component. If possible, share us a video on the exact issue you are facing with the above sample. This will help us to provide a prompt solution. 
 
Please, let us know if you need any further assistance.  
  
Regards,  
Indhumathy L 


HO Hosney January 19, 2021 06:51 AM UTC

Thank you Indumathy.

With that styling there will still be a gap on the right when there are no scrollbars. What I want is a complete fit with no gaps.

Please try the following css on your demo and try resizing/removing the panels until there are no scrollbars and you will see what I mean

.container-block {
        width: 817px;
        height: 400px;
        overflow: auto;
        border: 1px solid black;
        box-sizing:content-box;
      }



IL Indhumathy Loganathan Syncfusion Team January 20, 2021 06:21 AM UTC

Hi Hosney, 
 
Sorry for the inconvenience. 
 
We have validated your reported query and able to reproduce it. You can fix the reported issue by setting the width property value as “fit-content” in the container-block. 
 
Please find the modified code below, 
 
.container-block { 
        width: fit-content; 
        height: 400px; 
        overflow: auto; 
        border: 1px solid black; 
        box-sizing:content-box; 
} 
 
Please find the modified sample from below link, 
 
 
Please, let us know if you need any further assistance.   
   
Regards,   
Indhumathy L 


HO Hosney January 20, 2021 07:23 AM UTC

Thanks for that. I suppose it will not be possible to achieve this for a fixed container width? i.e resize the dashboard content to fit the container instead of the other way around.

IL Indhumathy Loganathan Syncfusion Team January 21, 2021 04:00 PM UTC

Hi Hosney, 
 
We have validated your reported query. As per your requirement, we have removed the space occupied by the scroll bar by adjusting the width of the container block. The following code snippets demonstrate the solution. 
 
In order to avoid the appearance of the horizontal scroll bar, we have added a padding around the control-section. 
 
.container-block { 
              width: 817px; 
            height: 400px; 
            overflow: auto; 
            padding: 20px; 
            border: 1px solid black; 
            box-sizing: content-box; 
} 
 
We have used resizeStop event to adjust the width of the container-block. 
 
function resizestop(args: ResizeArgs): void { 
  document.getElementById('container').style.width = document.getElementById('control').offsetWidth + 'px'; 
} 
 
We have prepared a sample demonstrating the solution. 
 
Please contact us if you require any further assistance. 
 
Regards, 
Indhumathy L 


HO Hosney January 22, 2021 04:28 AM UTC

Thanks Indumathy. I think you misunderstood. I want the container to have a fixed width and not change. Instead the dashboard panel should resize to fit the container. So if there is no scrollbar I want the dashboard to grow to fit the remaining space of the container.

IL Indhumathy Loganathan Syncfusion Team January 25, 2021 12:03 PM UTC

Hi Hosney, 
 
Sorry for the inconvenience. 
 
We have validated your requirement in DashboardLayout component. By default, Dashboard panels height will be derived from its parent element. In our sample(shared in previous update), control-section is the parent element of Dashboard panel. If you set overflow as auto for control-section to enable scroll bar, it will show horizontal scroll bar as well. To overcome this issue, we have added another div named container-block to enable vertical scroll bar. 
 
But when you resize the panels to the fixed container height, scroll bar will be removed and empty space will be maintained which is due to the default width of the container-block. This can be avoided if the width of the container-block is reset to the width of the control-section and refreshing the panels each time during resize.  
 
Please find the modified sample below  
 
 
Please let us know if you need further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer
Loader.
Up arrow icon