How to Overide Calculated Margin of "e-content-animation" When Sidebar is Open

[David]

Hello,

I may have missed it in the docs and examples so if I did, I apologize.

I need to know how to put my own values in for the margin that is generated by your code when the sidebar is open.

Here is an image of the "gap" I'm speaking of:

And here is the class in question, as per the developer console in the browser:

The gap being generated automatically when the sidebar opens is too large, I need to override that somehow and make it smaller, in order to fit my customer's design needs.

Any suggestions?

[David]

Just to be clear, I know that I can do the following:

.e-content-animation {
    margin-left: 50px !important;  
}

And override the class, but this removes the "push" behaviour of the control and essentially turns it into "over", where the sidebar gets displayed overtop of the existing page.

I need the menu to push the content when it opens, but I need control over the gap that it calculates, b/c right now it's way too big.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi David, 

 

Greetings from Syncfusion support. 

 

We have looked into your query on Sidebar component. We would like to let you know that, when Sidebar opens margin-left for the main content element of the Sidebar, based on the Sidebar’s width. No extra margin will be added to the main content element. So, your reported problem of extra margin with main content will not occur. 

 

For your convenience, we have prepared a simple sample with Sidebar for your convenience. 

 

https://www.syncfusion.com/downloads/support/forum/156054/ze/Sidebar_Layout_blazor175489922  

Also, margin and transition style will only apply to Sidebar element, if Type property of Sidebar is Push, Slide, Auto. 

 

Check out the following links to know more about Sidebar in Blazor. 

 

Sidebar	Demos: https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu     Documentation: https://blazor.syncfusion.com/documentation/sidebar/     API Reference:   https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html
Getting Started with Syncfusion Blazor	https://blazor.syncfusion.com/documentation/introduction/     https://blazor.syncfusion.com/documentation/getting-started/server-side-blazor/     https://blazor.syncfusion.com/documentation/appearance/theme/

 

 

If the above solution does not meet your expected requirement, then please share us exact details regarding your requirement with use case scenario of Sidebar details of your application. 

 

Plese, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Bryce Steuer]

How can I remove the huge margin shown in the second picture, while the Sidebar is open? That huge margin pushes the content almost off the screen.

[Indhumathy Loganathan]

Hi Bryce, 

 

We have prepared a sample that meets your exact representation but are unable to face the huge margin issue. The main content is properly rendered on the screen. 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156054/ze/Sidebar_Layout1276259792 

 

We suspect that this issue may have occurred because of the CSS customizations done on your end. If possible, replicate the issue in the shared sample, or else share with us the complete CSS style changes made at your end and sidebar component code snippets. These details would help us assist you promptly. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Bryce Steuer]

Thank you, I have fixed the issue. Blessings in Jesus Christ our Savior

[Keerthana Rajendran]

Hi Bryce, 

Most welcome and thanks for your blessings. We are happy to hear that the issue is resolved. Please get back to us if you need any further assistance. 

Regards, 

Keerthana R. 

[Sarah]

Hi  Keerthana Rajendran,

I saw your source. How can we implement the following image?

Thank you

[Indhumathy Loganathan]

Hi Sarah,

Currently, we are validating the feasibility of achieving your requirement in the Menu component with the Sidebar. But we need some additional time to further validate on this. We will update you with further details on or before May 27, 2022. We appreciate your patience.

Regards,

Indhumathy L

[YuvanShankar Arunagiri]

Hi Sarah,

Sorry for the delay,

We have validated your requirement and prepared the sample for first snapshot and achieve your requirement by using the HamburgerMode property of the menu. Please refer the below code snippet.

[Index.razor]:

@using Syncfusion.Blazor.Navigations;

 

<SfMenu @ref="menuObj" TValue="MenuItem" HamburgerMode="true" ShowItemOnClick="true">

    <MenuItems>

        <MenuItem Text="File">

            <MenuItems>

                <MenuItem Text="Open" IconCss="e-icons e-bullet"></MenuItem>

                <MenuItem Text="Save" IconCss="e-icons e-bullet"></MenuItem>

                <MenuItem Text="Exit" IconCss="e-icons e-bullet"></MenuItem>

            </MenuItems>

        </MenuItem>

        <MenuItem Text="Edit">

            <MenuItems>

                <MenuItem Text="Cut" IconCss="e-icons e-bullet"></MenuItem>

                <MenuItem Text="Copy" IconCss="e-icons e-bullet"></MenuItem>

                <MenuItem Text="Paste" IconCss="e-icons e-bullet"></MenuItem>

            </MenuItems>

        </MenuItem>

        <MenuItem Text="View">

            <MenuItems>

                <MenuItem Text="Toolbars">

                    <MenuItems>

                        <MenuItem Text="Menu Bar" IconCss="e-icons e-bullet"></MenuItem>

                        <MenuItem Text="Bookmarks Toolbar" IconCss="e-icons e-bullet"></MenuItem>

                        <MenuItem Text="Customize" IconCss="e-icons e-bullet"></MenuItem>

                    </MenuItems>

                </MenuItem>

            </MenuItems>

        </MenuItem>

        <MenuItem Text="Zoom">

            <MenuItems>

                <MenuItem Text="Zoom In" IconCss="e-icons e-bullet"></MenuItem>

                <MenuItem Text="Zoom Out" IconCss="e-icons e-bullet"></MenuItem>

                <MenuItem Text="Reset" IconCss="e-icons e-bullet"></MenuItem>

            </MenuItems>

        </MenuItem>

    </MenuItems>

</SfMenu>

 

@code{

    private SfMenu<MenuItem> menuObj;

    protected async override Task OnAfterRenderAsync(bool firstRender)

    {

        if(firstRender)

        {

            await menuObj.OpenAsync();

        }

    }

}

 

<style>

    .e-bullet::before {

        content: '\e254';

    }

    .e-menu-header {

       display: none !important;

    }

</style>

Could you please check the above code and get back to us, if you need any further assistance on this. 

For second image, we can’t achieve that UI property, in menu we don’t have support for that UI.

For more details, please refer the below UG links.

UG link: https://blazor.syncfusion.com/documentation/menu-bar/usecase-scenario#hamburger-menu;

https://blazor.syncfusion.com/documentation/menu-bar/how-to/change-orientation

Regards,

YuvanShankar A