(Middle/Bottom)Alignment is Incorrectly Aligning to Top in Vue Demo


Dear Syncfusion Support Team,

I am currently using the Syncfusion Diagram component in a Vue.js application, specifically version 28.x.x of the libraries.


it seems the alignment feature isn't working correctly.  (Toolbar)

I checked the official demo at 'https://ej2.syncfusion.com/vue/demos/#/tailwind3/diagram/default-functionality.html,' and even when selecting Bottom or Middle, the elements are still being aligned to the Top.


Please check this.




1 Reply

MG Moulidharan Gopalakrishnan Syncfusion Team October 21, 2025 07:37 AM UTC

Hi,

 

In the EJ2 Diagram component, alignment commands operate relative to either the first-selected object or the overall selection boundary. By default, the AlignmentMode is set to "Object", meaning objects align to the first-selected item. If you change alignmentMode to "Selector", the objects align based on the combined bounds of all selected items (the selection boundary). You’ll notice the distinction most clearly when the selected nodes have differing dimensions.

 

For more details, sample code, and a video demonstration, please refer to the documentation: 

Alignment Commands in Vue Diagram component | Syncfusion® 

Vue Diagram API (align)- Syncfusion

Sample: A3cfagly (duplicated) - StackBlitz


Regards,

Moulidharan


Attachment: AlignmentVueDiagram_24bec56.zip

Loader.
Up arrow icon