Conditional render for part of the Radzen component

Radzen.Blazor Components
1

Does Radzen allow to render some parts of its components conditionally? For example, conditional render for Helper part of the FormField doesn't work

<RadzenFormField>
    <ChildContent>
		...
    </ChildContent>
    @if (!string.IsNullOrEmpty(HelperText))
    {
		<Helper>
			<RadzenText Text="@HelperText" />
		</Helper>
    }
</RadzenFormField>

It says "Unrecognized child content inside component 'RadzenFormField'. The component 'RadzenFormField' accepts child content through the following top-level items: 'ChildContent', 'Start', 'End', 'Helper'.".

This variant

<Helper>
	@if (!string.IsNullOrEmpty(HelperText))
	{
		<RadzenText Text="@HelperText" />
	}
</Helper>

is not suitable, because it places the helper markup in the final HTML even if HelperText is null or empty (div with "rz-form-field-helper" class):

<div class="rz-form-field">
    <div class="rz-form-field-content">...</div>
    <div class="rz-form-field-helper">...</div>
</div>

So, if I customize my helper through "rz-form-field-helper" class with, for example, additional paddings or margins, I get the unnecessary empty space even if HelperText is null or empty.

2

This is not related to the component itself but to the Microsoft Razor compiler in general.

3

Tried also some conditional styling with pseudo-class:

.rz-form-field-helper:not(:empty) {
    padding: 2rem;
}

it doesn't work either. It applies to all tags with rz-form-field-helper class, regardless of whether they are empty or not.

4

Set a custom class to your RadzenFormField and use it in your selector:

<RadzenFormField class="my-class">

.my-class .rz-form-field-helper:not(:empty) {
    padding: 2rem;
}
5

Unfortunately it behaves the same as without my-class.

6

Currently there is no way to conditionally render <div class="rz-form-field-helper">...</div>.

I tested something similar in our online demos but there wasn't any space allocated:

image
image704×242 2.69 KB

        <RadzenFormField Text="Card Number" Variant="@variant">
            <Start>
                <RadzenIcon Icon="credit_card" />
            </Start>
            <ChildContent>
                <RadzenMask Mask="**** **** **** ****" CharacterPattern="[0-9]" Placeholder="0000 0000 0000 0000" Name="CardNr" />
            </ChildContent>
            <Helper>
                @if (false)
                {
                    <RadzenText TextStyle="TextStyle.Caption">* required</RadzenText>
                }
            </Helper>
        </RadzenFormField>
7

It is not allocated, because you didn't apply some paddings or margins to helper. But if fields are inside a stack, it is hard to distinguish to which of them the helper relates - there is no enough space between helper element and the next field for this.

image

To distinguish it I need to set gap (RadzenStack.Gap) as minimum as 1.5 rem, which occupies too much space on the screen. So, the suitable way would be to add some padding or margn to just the helper element.

If you add some style with padding, the space will be allocated even with an empty helper element:

<style>
.rz-form-field-helper:not(:empty) {
    padding: 2rem;
}
</style>

image
image1306×817 45.9 KB

8

I think the HTML comments used by Blazor prevent the :not(:empty) selector from matching. I don't have a workaround for that.