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. Image for the cookie policy date

How to make the whole Blazor Server project RTL?

I'm using Syncfusion in my Blazor server app. I want to make the whole application to take RTL mode. The sidebar is LTR. When I try to use EnableRtl="true" in <SfSidebar> tag, the sidebar does not come to the right side and its content does not take a good position and look:

Blazor1.png


Blazor2.png


The MainLayout code is as follows:


<SfSidebar ID="Sidebar" EnableRtl="true" Type="SidebarType.Push" Width="300px" DockSize="65px" EnableDock="true" @ref="Sidebar" @bind-IsOpen="SidebarToggle">
    <div class="sidebar" style="position:fixed;z-index:1200">
        <div class="topnav navbar navbar-dark">
            <button class="navbar-toggler" @onclick="ToggleNavMenu" />
            <a class="navbar-brand" rel='nofollow' href=""><span class="displayText" style="margin-right:30px">TestProject</span></a>
        </div>
        <div @onmouseover="MouseIn" @onmouseout="MouseOut">
            <NavMenu />
        </div>
    </div>
</SfSidebar>


<div class="main">
    <div class="top-row px-4" style="z-index:1111;padding-top:0px">
        <a rel='nofollow' href="https://www.syncfusion.com/blazor-components/" target="_blank">Blazor Components</a>
        <a rel='nofollow' href="https://blazor.syncfusion.com/documentation/" target="_blank">User Guide</a>
        <a rel='nofollow' href="http://blazor.syncfusion.com/" target="_blank">View Demos</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>
<style>
    .sidebar {
        width: 300px;
        min-width: 300px;
    }

    .navbar-toggler {
        display: inline-block;
        border: none;
        width: 24px;
        height: 24px;
        margin-left: 30px;
        background-image: url('images/ToggleButton.png');
        background-color: #05163C;
        transform: scale(0.75);
        transform-origin: left;
        color: #ffffff;
    }


    /* Content area styles */
    .title {
        font-size: 20px;
    }

    /* Sidebar styles */
    .e-sidebar .e-icons::before {
        font-size: 25px;
    }

    .e-sidebar:hover .e-open {
        display: inline-block;
    }

    .e-sidebar:hover .e-close {
        display: none;
    }
    /* dockbar icon Style */
    .e-sidebar .home::before {
        content: '\e102';
    }

    .e-sidebar .profile::before {
        content: '\e10c';
    }

    .e-sidebar .info::before {
        content: '\e11b';
    }

    .e-sidebar .settings::before {
        content: '\e10b';
    }

    .e-sidebar .expand::before,
    .e-sidebar.e-right.e-open .expand::before {
        content: '\e10f';
    }

    .e-sidebar.e-open .expand::before,
    .e-sidebar.e-right .expand::before {
        content: '\e10e';
    }

    /* end of dockbar icon Style */

    .e-sidebar.e-dock.e-close span.e-text {
        display: none;
    }

    .e-sidebar.e-dock.e-close .navbar-toggler {
        margin-left: 21px;
    }

    .e-sidebar.e-dock.e-close .nav.flex-column {
        margin-left: -8px;
    }

    .e-sidebar.e-dock.e-close .displayText {
        display: none;
    }

    .e-sidebar.e-dock.e-close .nav-item.px-3 {
        width: 80px;
    }

    .e-sidebar.e-dock.e-close .separator {
        border: 1px solid #FFFFFF;
        opacity: 0.14;
        width: 45px;
        margin: 1rem;
        margin-top: 0px;
        margin-left: 0.5rem;
    }

    .e-sidebar.e-dock.e-close .oi.oi-home {
        margin-left: -1px;
    }

    .e-sidebar.e-dock.e-close .syncfusion-blazor-icons {
        margin-left: -1px;
    }

    .e-sidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }

    .e-sidebar li {
        list-style-type: none;
        cursor: pointer;
    }

    .e-sidebar ul {
        padding: 0px;
    }


    .e-sidebar span.e-icons {
        color: #c0c2c5;
        line-height: 2
    }

    .e-open .e-icons {
        margin-right: 16px;
    }

    .e-open .e-text {
        overflow: hidden;
        font-size: 15px;
    }

    .sidebar-item {
        text-align: center;
        border-bottom: 1px #e5e5e58a solid;
    }

    .e-sidebar.e-open .sidebar-item {
        text-align: left;
        padding-left: 15px;
        color: #c0c2c5;
    }

    .e-sidebar {
        background: #2d323e;
        overflow: hidden;
    }

    @@font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset= . . . . //some font data here
        font-weight: normal;
        font-style: normal;
    }

    /* end of sidebar styles */
</style>

@code
{
#if NETCOREAPP3_1 || NETSTANDARD2_1
    SfSidebar Sidebar;
#else
    SfSidebar? Sidebar;
#endif
    public bool SidebarToggle = false;
    public bool SidebarToggleFixed = false;
    public void ToggleNavMenu()
    {
        SidebarToggle = !SidebarToggle;
        SidebarToggleFixed = !SidebarToggleFixed;
    }
    public async Task MouseIn(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY);
        if (!SidebarToggle && isSidebar)
        {
            SidebarToggle = true;
        }
    }
    public async Task MouseOut(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY);
        if (SidebarToggle && !isSidebar)
        {
            if (!SidebarToggleFixed)
            {
                SidebarToggle = false;
            }
        }
    }
}


How can I make the sidebar RTL (Position in the right side of the page and a proper look).


1 Reply 1 reply marked as answer

SS Sivakumar ShunmugaSundaram Syncfusion Team January 23, 2023 02:07 PM UTC

Hi Fardin,


Greetings from Syncfusion support.


With the shared details, you are facing an issue with implementing Blazor Sidebar in right to left position. We would like to let you know that setting the EnableRtl property as true will only make the content inside the Sidebar an RTL position. So, to achieve your requirement, you just need to set the Sidebar Position property as “Right” as mentioned below.


Refer to the below code snippet.

[Index.razor],

 

<SfSidebar Width="250px" @bind-IsOpen="@toggle" ID="def" CloseOnDocumentClick=true EnableRtl=true Position="SidebarPosition.Right">

    <ChildContent>

        <div style="text-align: center;" class="text-content"> Sidebar </div>

   <div class="container">

    <div class="bottom-element">This element will be at the bottom of the container</div>

</div>

    </ChildContent>

</SfSidebar>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1983953497.zip


Check out the shared sample for your reference.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon