Text alingment in FlowChart Node Changes to left allign in InteractiveAuto mode.

[Ashish Kukreti]

Hello,

When running Diagram in interativeAuto mode the text alignment in nodes goes to left(right of screen) please see below. for simplicity i have used example from online demo (https://blazor.syncfusion.com/demos/diagramcomponent/flowchart?theme=bootstrap5 )

and move the component to Client project with rendering mode set to "@rendermode InteractiveAuto".

I am using .Net 8 Blazor Web App Project for this test.

When rendering from Server(1st time)

subsequent attempts.

If i refresh page text alignment corrects itself.

any help is greatly appreciated

Thanks

[Sumathi Uthayakumar]

Hi Ashish,

We have attempted to replicate the reported issue on our end. We have created a sample in .Net 8 using InteractiveAutoMode and set the Interactive location as Perpage. However, when we navigate the page, the text alignment in the FlowChart Node changes to left alignment in InteractiveAuto mode, To resolve this issue, you need to set data-enhance-nav="false".

We have provided a sample and video for your reference, and also shared a code snippet for your convenience.

    <div class="nav-item px-3">

        <NavLink class="nav-link" data-enhance-nav="false" rel='nofollow' href="diagram">

            <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> DiagramPage

        </NavLink>

    </div>

Regards,

Sumathi U.

Attachment: Forum185647_3940604d.zip

[Ashish Kukreti]

Thanks.

However, this doesn't resolve the issue we have. setting  data-enhance-nav="false" makes this blazor component run in server side rendering mode. which is not what we want. In our application we would like to use blazor component(with diagram) to run in interactiveAuto mode, this gives us performance improvement introduced in .Net v8 Blazor. 

[Sumathi Uthayakumar]

We are currently validating the reported issue on our end. We will provide an update with additional information on December 5, 2023.

[Balavignesh RaviChandran]

Hi Ashish,

The reported issue has been documented by the Microsoft as a behavior in the following documentation

ASP.NET Core Blazor routing and navigation | Microsoft Learn

In our diagram components we use interop call to position the text annotation with respect to the content and user defined style. Since Blazor's enhanced navigation and form handling avoid the need for a full-page reload for same-document navigation and preserves more of the page state, so pages load faster, usually without losing the user's scroll position on the page, thus in turn prevents the interop calls to measure the text content to position it correctly. The data-enhanced-nav = “false” will not interfere with Render Modes as the component act as WASM once DLLs are loaded in browser.