SideBar RTL

hello sir, I need your help
I make custom rtl design (rtl style file) for my website to make my website rtl support
but I have an issue in sidebar , expand and collapse for body and sidebar working good in ltr
but not working in rtl
please help me to solve this issue
thank you

Hello, you must find a way to edit RadzenBody..

the code must be like this

 protected string GetStyle()
        {
            int num = 250;
            if (!string.IsNullOrEmpty(Style))
            {
                string text = (from i in Style.Split(';')
                               where i.Split(':')[0].Contains("margin-right")
                               select i).FirstOrDefault();
                if (!string.IsNullOrEmpty(text) && text.Contains("px"))
                {
                    num = int.Parse(text.Split(':')[1].Trim().Replace("px", "").Split('.')[0].Trim());
                }
            }

            return $"{Style}; margin-right: {((!Expanded) ? num : 0)}px";
        }

There is now a way to achieve this with the newly introduced RadzenLayout.

  1. Wrap RadzenBody, RadzenHeader, RadzenFooter and RadzenSidebar with RadzenLayout. Since the latest version 2.65.6 new applications already use RadzenLayout by default. You can copy the main layout (meta\layouts\main.json) of a new app to your existing app or manually edit the main.json file to contain a root layout component:

    {
      "components": [ {
         "type": "layout",
         "components": [ /* everything else */ ]
         } 
      ]
    }
    
  2. Add the following to the CSS file of your app (styles.css)

    div.rz-layout {
       grid-template-areas:
         "rz-header rz-header"
         "rz-body rz-sidebar"
         "rz-footer rz-footer";
    }
    

hello friend Where I should add this code please tell me.

hello korchev
what files I should edit and where I should add code?

I have mentioned that in my reply (main.json, styles.css).

I didn't find both 2 files in my project
my project is blazor server

Every Radzen Blazor server application has those files. Are you using Radzen at all? Your thread is in the Radzen IDE category.

No I'm sorry put I use radzen blazor components in my project
and I followed your documentation to install it and I added css and js files of radzen components

In that case please update the forum category - it should be Radzen.Blazor Components.

As for what files to update - check our online examples. You should add this to your layout.

<RadzenLayout>
  <RadzenHeader></RadzenHeader>
  <RadzenBody>@Body</RadzenBody>
  <RadzenSidebar></RadzenSidebar>
</RadzenLayout>

The CSS can be added to the CSS file of your application (by default it is site.css).

1 Like

Okay korchev, I will try
put I checked online examples put I didn't find rtl css support

hello korchev, Put I tried RadzenLayout put not accepted
what I should do?
should I update radzen version in my project or what I should do?

@korchev i tried more than one time, used (dir="rtl") and used CSS for rtl then your mentioned code but not woking


3

Your Body component seems to have some style set. Try removing it (from the JSON).

One thing was missing:

grid-template-columns: 1fr auto;

Here is the final CSS:

div.rz-layout {
   grid-template-columns: 1fr auto;
   grid-template-areas:
     "rz-header rz-header"
     "rz-body rz-sidebar"
     "rz-footer rz-footer";
}

Attached a sample app. The changes are in the main layout and styles.css.
RTLSidebar.zip (69.5 KB)

i got the result, thanks..

thanks @korchev
when I running Project i get this error and i try to solve it but i can't

i solve first issue but i want to know how to change style in runtime as in image

thanks
@korchev

@enchev
What about last question and attached photo with it ?

This is controlled by the Expanded property of RadzenBody. You can also check the source code. I am locking this thread now as it contains explanations, links to source and a sample application.