DropDown blank space at the beginning


I have a problem with the dropdown component. The text is showed floating to the right and there is some blank space on the left.

It can be seen on the following images:

But when I click on in, all is ok:

It happens when the default with is changed to a fixed number of pixels. If it is set to default, there is a lot of extra blank space at the beggining:

How can I fix it?


Can you share the code behind the dropdown?

It seems the DropDown is inside something which applies text-align: right CSS rule.

Hello, sorry for the delay.

Yes, it is inside text-align: right:

 <div class="col-6 text-right" style="text-align: left">
            <RadzenDropDown AllowVirtualization="false" Data="@(new[] { new AvailableCulture { ShortName="ES", Value = "es-ES", FullName="Español" },new AvailableCulture { ShortName="US", FullName = "English", Value = "en-US" }})" style="display: inline-flex" TextProperty="FullName" @bind-Value="@Culture" ValueProperty="Value" Name="DropDownCulture" Change="@DropDownCultureChange">
              <Template Context="data">
                <RadzenImage Path="@((data as AvailableCulture).ImageUrl)" style="width: 15px">
                <RadzenLabel Text="@($"{((data as AvailableCulture).FullName)}")">

But, the column where it is not text-aligned to the right:

But the code generate is aligned to the right.

If I modify directly the generated code,all the column goes to the left, but the problem continues:


The text-right class has the following definition (it comes from Bootstrap):

.text-right {
text-align: right !important;

It means it has precedence over style="text-align: left". You can edit the .json file of the page and remove the text-right class from the column.