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.
-
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 */ ] } ] }
-
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).
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
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..
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.