icons not aligning

[Richard Rooks]

Using the sidebar and treeview for left menu operation the icons do not align if you have one menu item that has URL to navigate to and the next menu item has subitems but no URL.

How to fix this alignment issue?

Thanks Richard

Attachment: leftmenu_93eee46a.zip

[Subalakshmi Ramachandran]

Hi Richard,

Thank you for reaching out with your query.

Based on the information you've provided, we believe you might be using the Menu component in the Sidebar. To assist you more effectively, could you please provide some additional details about the sample you're using? Specifically, we're interested in knowing if you're following the demo sample available at https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu?theme=fluent in your project.

Your cooperation is greatly appreciated as we work towards resolving this issue.

Best Regards,
Suba R

[Richard Rooks]

<sfsidebar htmlattributes="@HtmlAttribute" width="220px" @ref="Sidebar" docksize="220px" animate="true" enabledock="true" enablegestures="false">

    <childcontent>

      <div class="main-menu">

        <div>

          <sftreeview cssclass="main-treeview" @ref="TreeView" expandon="@Expand" tvalue="TreeData" fullrownavigable="true">

            <treeviewfieldssettings id="nodeId" text="nodeText" iconcss="iconCss" datasource="treedata" haschildren="hasChild" parentid="pid" navigateurl="url">

            </treeviewfieldssettings>

            <treeviewevents tvalue="TreeData" nodeclicked="NodeClickedHandler"></treeviewevents>

          </sftreeview>

        </div>

      </div>

      <div>

        <sfmenu cssclass="dock-menu" items="@MainMenuItems" orientation="Syncfusion.Blazor.Navigations.Orientation.Vertical">

          <menuevents tvalue="MenuItem" itemselected="Selected" onopen="OpenSubMenu"></menuevents>

        </sfmenu>

      </div>

    </childcontent>

  </sfsidebar>

[Subalakshmi Ramachandran]

Hi Richard,

Thank you for detailing the issue you're experiencing with the alignment of icons with your Sidebar Treeview sample.

We've created a simple sample using the code you provided, but we were unable to reproduce the issue you described. In our tests, the icons of Treeview aligned correctly while setting navigateUrl for the node before the node having child.

To assist you more effectively, we would appreciate if you could provide us with additional information:

1. Could you kindly share us the styles and stylesheets added in the sample for further investigation?
2. If possible, please try to replicate the issue using the sample we've provided.

For your reference, we've also attached screenshot.

We look forward to your response and are committed to helping you resolve this issue.

Regards,
Suba R

[Richard Rooks]

do you have a zip file for downloading your project?

[Subalakshmi Ramachandran]

Hi Richard,

Sorry for the inconvenience caused. Please find the below attached sample for your reference.

Attachment: SidebarTreeUrl_d4bea541.zip

[Richard Rooks]

All is good now. Thanks.

[Subalakshmi Ramachandran]

Hi Richard,

You're welcome! If you have any more questions or need further assistance in the future, don't hesitate to ask.

Regards,
Suba R