How to Align DropDown list selection squares?

Radzen.Blazor Components
1

Hi, I'm a bit new to all the CSS / HTML things, I was tring to align the DropDown in order to force
it to support RTL laungeges like Hebrew but with little sucess, my code is:

<RadzenDropDown AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                @bind-Value=@multipleValues Multiple="true" Placeholder="Select..." Data=@customers TextProperty="SiteName" ValueProperty="SiteName"
                Change=@(args => OnChange(args, "DropDown with multiple selection")) Style="width: 300px; float: right; text-align: left" />

image

The selection squares are bouncing all over the list, I want them to be aligned to one side,
does not matter to which side, how can I do that ?

2

Hi @Tom_Boudniatski,

In general you can try experimenting with the .rz-multiselect-item class. It seems you have somehow reversed the position of the checkbox and text but the text alignment remains to be left. Try setting text-align: right.

.rz-multiselect-item {
   text-align: right;
}
3

Hi, unfortunately that does not work, my _Host.cshtml:

<!DOCTYPE html>
<html dir ="rtl" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AdminWebUI</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="AdminWebUI.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</head>

Seems that many Radzen componenets does not like this approach, I deleted the dir ="rtl"
from the <HTML> tag, while adding it to the MainLayout instead, that did the trick.

I wonder why I could not negate the dir ="rtl" using this:

<div dir ="ltr">
<RadzenDropDown  *some propeties*  />
</div>

Will there be any RTL support any time soon ?

4

I tested the following which seems to work.

  1. Set rtl direction <html dir="rtl">
  2. Added the following CSS to the styles.css file of the application (or site.css)
*[dir=rtl] .rz-multiselect-item,
*[dir=rtl] .rz-dropdown-item {
    text-align: right;
}

The end result was this which is acceptable IMHO:

image
image654×634 50.7 KB

The dropdown items are appended at the end of the <body> element.

You are including the Radzen theme twice. You can leave only default-base.css since you seem to include bootstrap separately.

1 Like
5

Thanks, that worked !