RadzenDropDown breaks styling

Radzen.Blazor Components
1

Consider the following form fragment:

							<RadzenCard Variant="Variant.Text" class="rz-m-0 rz-px-0 rz-pt-0 rz-pb-1">
								<RadzenRow>
									<RadzenText TagName="TagName.H2" Style="color:darkblue" Text="Change" />
								</RadzenRow>
								<RadzenRow>
									<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">
										Type of change:
										@if (IsNew)
										{
											<RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="required" Variant="Variant.Outlined" IsPill="true" class="rz-ml-1" />
										}
									</RadzenText>
								</RadzenRow>
								<RadzenRow>
									@if (IsNew)
									{
										<RadzenDropDown TValue="int" @bind-Value="@DTO.ChangeType" Data="@changeTypes" Style="width:80%"
														AllowFiltering="@true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
														Placeholder="Please, select ..."
														TextProperty="@(nameof(EnumOption.Text))" ValueProperty="@(nameof(EnumOption.Id))"
														Change="@OnTypeChange" />
									}
									else
									{
										@if (changeTypes != null)
										{
											<RadzenRow Style="font-weight: bold">
												@(changeTypes.First(c => c.Id == DTO.ChangeType).Text)
											</RadzenRow>
										}
									}
								</RadzenRow>
							</RadzenCard>

							<RadzenCard Variant="Variant.Text" class="rz-m-0 rz-px-0 rz-pt-0 rz-pb-1">
								<RadzenRow TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">
									Justification:<RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="required" Variant="Variant.Outlined" IsPill="true" class="rz-ml-1" />
								</RadzenRow>
								<RadzenRow>
									<RadzenTextBox Name="just" @bind-Value="@DTO.Justification" Style="width:80%" />
									<RadzenRequiredValidator Component="just" Text="A justification (reason) is required" />
									<RadzenLengthValidator Component="just" Text="Justification can be up to 255 characters" />
								</RadzenRow>
							</RadzenCard>
`

The visual result:

image
image789×148 7.27 KB

When I inspect the two text elements highlighted, the second one has styles that shouldn’t be there … They seam to “leak” from the drop down.

2

Hi @gounaras,

Unfortunately the provided code alone doesn't indicate the cause of the problem. You can try inspecting the DOM element to see where the unwanted CSS comes from. You can also prepare a runnable demo in the playground.

3

Problem found, copy-paste error…

<RadzenRow TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">									Justification:<RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="required" Variant="Variant.Outlined" IsPill="true" class="rz-ml-1" />								</RadzenRow>

Applying the text style to the row …