We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Swimlane Diagram horizontal offset not updating

Thread ID:





132184 Aug 18,2017 08:35 AM UTC Aug 23,2017 08:55 AM UTC JavaScript 3
Tags: ejDiagram
Alan Earp
Asked On August 18, 2017 08:35 AM UTC

I've got a swimlane diagram which renders OK, bu the only issue is that if it is a large one (wide) then it seems to want to centre the diagram in the viewport, whereas I'd rather it start from the left so you can see the swim lane names.
I've tried to update the offset to 1 then back to 0 (as it appears to be set to zero even though the scroll bar is not at zero with various methods as listed on https://help.syncfusion.com/js/diagram/scroll-settings
the scroll bars don't update, and it just always renders in the middle
Tried setting enableAutoScroll to true and/or false, no difference
Tried various settings for scrollSettings but it isn't making any difference

Shyam G [Syncfusion]
Replied On August 21, 2017 12:47 PM UTC

Hi Alan, 
If you need to update the scrollbar initially, please use scrollSettings horizontalOffset and verticalOffset property to achieve your requirement. Also please use create event in which you can update the horizontal scrollbar to the center of the diagram. 
Code example: 
//define create event 
function create(args) {             
            var diagram = $("#diagram").ejDiagram("instance"); 
            diagram.model.scrollSettings.horizontalOffset = diagram.model.scrollSettings.viewPortWidth / 2; 
Please use diagram client side fitToPage method to fit the diagram within the viewport. Please refer to the code example below and help documentation. 
Code example: 
    function fittopage() { 
            var diagram = $("#diagram").ejDiagram("instance"); 
Shyam G 

Alan Earp
Replied On August 22, 2017 03:37 PM UTC


I've tried both methods, but it doesn't work. my diagram is quite wide, see playground item below


Shyam G [Syncfusion]
Replied On August 23, 2017 08:55 AM UTC

Hi Alan, 
Please use fitToPage method in which you set the mode as page and region as content to fit the diagram within the viewport based on the diagram elements. Please refer to the code example and modified playground link below. 
Code example: 
function createDiagram(args) { 
            var diagram = $("#diagram").ejDiagram("instance"); 
            diagram.fitToPage("page", "content"); 
Shyam G 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon