Behaviour of vertical and horizontal scroll bars

[Kabe]

Hi

I'm having trouble understanding when vertical and horizontal scroll bars appear for a diagram.

My preference would be that they only appear IF there something outside the visible area on the screen.

I'm attaching a video and stackblitz which shows a different behaviour. If I pan towards the right or bottom, it seems to behave as expected...the scrollbar appears when a node moves off the visible screen. 

If I pan to the top or left, the scrollbar appears even though nothing is off screen. In this case the scroll bar serves no purpose and is even confusing because it makes it seem like there is something that is offscreen, but there isn't.

Again, ideally the scrollbar(s) only appear if something is off screen. Is this a bug?

https://stackblitz.com/edit/angular-uejmfh-ttukqm?file=src%2Fapp.component.ts

Attachment: scroll_bars_123bc18c.zip

[Moulidharan Gopalakrishnan]

Hi,

The scrollbar for the diagram appears when either the diagram area or the content within the diagram exceeds the viewport boundaries. We noticed that in your sample, the scrollLimit is set to Infinity, which allows scrolling beyond the defined region of the diagram.

 

To restrict scrolling to within the bounds of the diagram, please set the scrollLimit property to "Diagram". This configuration will ensure that scrolling is limited to the dimensions of the diagram itself.

 

Please note that if the defined size of the diagram exceeds the viewport but the content remains within the viewport, you will still be able to pan the diagram up to its defined limits.please refer the documentation for further clarification. 

Documentation: Scroll settings in Angular Diagram component | Syncfusion

 

Regards,

Moulidharan

[Kabe]

Hi - 

Thanks I re-read the documentation just to make sure I understood it and I believe I do.

The reality is, is that I'm trying to make a diagram that doesn't show scroll bars unless a node (or connector etc) is off screen. It seems to be impossible. Even with scrollLimit set to Diagram (which is not what I want) I still get scroll bars appearing.

I have tried many different things (include updateViewport) but nothing seems to do the trick. Are you able to modify my stackblitz to show an example of Infinity mode but no scrollbars (unless something is off screen)?

[Moulidharan Gopalakrishnan]

Hi,

We can create a diagram that doesn't display scroll bars unless a node or connector moves off-screen, i.e., out of the viewport. As mentioned earlier, the scroll bars appear when the diagram area's size (height and width) exceeds the viewport. To manage this, set the diagram's height and width to "100%", so the scroll bars will only appear when the diagram content exceeds the viewport.

Note: If you set the diagram's height and width to "100%" for a container that fills the entire webpage, the diagram will not render. The container holding the diagram should have a static height and width.

Please refer to the sample for reference.

Sample: https://stackblitz.com/edit/angular-uejmfh-3ywvxn?file=src%2Fapp.component.html

Regards,
Moulidharan G

[Kabe]

Hello

I tried your sample but there are indeed scroll bars (both horizontal and vertical) even though no elements are off-screen. Please see screenshot below and video.

an you please try again? I have tried many combinations with no luck.

Attachment: scroll_bars_(2)_7183cf12.zip

[Moulidharan Gopalakrishnan]



Hi,

Please note that when the scrollLimitis set to 'Infinity', the scrollbar will appear during panning, as this is the expected behavior. From the provided video, we cannot clearly replicate the issue, as the diagram might appear small due to your screen resolution. Additionally, in the StackBlitz sample, the scrollbar may render if the diagram is displayed in a small viewport. Kindly modify the given standalone sample in a way that allows us to replicate the issue, so we can assist you better.

Regards,
Moulidharan G

Attachment: myapp_77698f09.zip

[Kabe]

Hi - thanks for the sample.

Okay - here you go....I think there 3 separate things here.

#1. I’ve attached a video and project which demonstrates the vertical and horizontal scrollbars appearing. For this scrollLimit is set to ‘Diagram’ which I believe earlier you said should result in no scroll bars.

#2. When scrollLimit is set to Infinity you said the scrollbars is expected behaviour. I really don’t see how this is expected behaviour. Scroll bars should only appear if something is out of view! Is this possible?

#3. If #2 is not possible, Is there a way, when scrollLimit is set to infinity, to just permanently turn off the scroll bars? I would be happy enough if we could just turn them off all together. I believe that is what they are doing here: https://demo.bpmn.io/new Besides, I use the diagram Overview and the user will be able to see the full diagram there. I have included a screenshot that shows my application (including those pesky scroll bars).

Thanks as always!

[Moulidharan Gopalakrishnan]

Hi,

We have prepared a sample based on your requirement. Please note that the scroll appears in the diagram when the defined diagram region is panned outside the viewport area, not based on the diagram content alone. Refer to the attached video demonstration for clarification.

In your sample, We added diagram ruler to understand clearly, when the fitToPage() method is called during the created event In your application , which centers the diagram elements within the viewport. This causes the ruler to display negative regions as part of the diagram, and while panning, once the diagram region moves into the positive area, the scroll bar will appear which is an expected behvior.

For your case, where you want to hide the scroll bar permanently, you can use the pageSettings option to set a fixed height and width. This will prevent the diagram from moving beyond those values, ensuring no scroll bar appears. Additionally, enabling the showPageBreaks option will indicate the diagram limits that cannot be panned beyond. When multiple pages are enabled, the page size dynamically adjusts in multiples of the page width and height, ensuring the diagram fits within the page boundaries

Documentation: Page settings in Angular Diagram component | Syncfusion

Regards,
Moulidharan

Attachment: ScrollBehaviorDiagram_f843e83f.zip

[Kabe]

Hello and thanks for this information. You did say you prepared a sample but the attachment contains only 2 videos so I'm wondering you meant to attach a sample as well? 

Please let me know and I'll see if I can figure this out.

[Kabe]

Also can you please remove my attachment from the earlier post (or mark it private):  myapp_77698f09_587d0902.zip

Thanks!

[Moulidharan Gopalakrishnan]

Hi,

Apologies. Please find the attached sample regarding the scrolling behavior. We have removed the mentioned attachment from this thread.

Regards,
Moulidharan

Attachment: myapp_3495c81c.zip