How to remove FormField's label truncation?

Radzen.Blazor Components
1

It looks like

image

I want the label to occupy enough space to hold the whole its text without truncation. There is a lot of space at the right side of the RadzenStack. But I don't want the field to be stretched by setting AlignItems="AlignItems.Stretch" for the RadzenStack. Tried with various flex, flex-grow, flex-shrink - no success.

My markup

<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Start">

    <RadzenFieldset Style="flex-grow: 1; flex-shrink: 0;">
        <HeaderTemplate>...</HeaderTemplate>
        <ChildContent>
            <RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem">
			
                <RadzenFormField
                    AllowFloatingLabel="false"
                    Variant="Variant.Flat"
                    Style="flex: 1;">
				    ...
				</RadzenFormField>
				
                <RadzenButton ... />
				
            </RadzenStack>
        </ChildContent>
    </RadzenFieldset>

</RadzenStack>
2

Hi @Alex55040,

You can try setting an arbitrary width:

<RadzenFormField Style="width: 400px;">...</RadzenFormField>

Or min/max-width if you aim for responsiveness:

<RadzenFormField Style="min-width: 400px; max-width: 500px;">...</RadzenFormField>
3

Thank you for your responce. Tried already with width, but this is not flexible - the text is set to the field dinamically and can be longer than hardcoded field length. If it would be automatically adjusted to the text't length...

It seems like the label length is restricted somewhere inside the form field styles - I can't find where. If it would not be restricted, then only the external (for the form field) container can determine the fom field's label length, and the label should be stretched to the maximum of the allowed form field's width. It seem like the label plays no role on growing the form field's occupied width, and I can't find why. Perhaps because of the floating effect based on the transformation, or the absolute position of the label after transformation...

4

Another similar issue, but now with a date time picker - it is truncated regardless of the content (both label's and input field's):

image

But its container is determined as wrapped, and it should be wrapped if there is no enough space for the content of the picker. The whole page markup:

<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
    <RadzenFieldset>
        <HeaderTemplate>@Title</HeaderTemplate>
        <ChildContent>
            <RadzenStack Orientation="Orientation.Vertical">
				...
            </RadzenStack>
        </ChildContent>
    </RadzenFieldset>
    <RadzenFieldset> @* <---- this one *@
		<HeaderTemplate>@NewExpirationDate</HeaderTemplate>
		<ChildContent>
			<RadzenStack 
				Orientation="Orientation.Horizontal"
				Gap="0.5rem" 
				Wrap="FlexWrap.Wrap">
				<RadzenDatePicker ... />
				<RadzenButton ... />
			</RadzenStack>
		</ChildContent>
	</RadzenFieldset>
</RadzenStack>

And it is actually get wrapped, but only at this state (give it a little less width, and it will be wrapped):

image
image

5

Automatically adjusting the FormField's width to the label text's length is not possible. The label is floating and absolute positioned inside the FormField. Even if it was technically possible I would not recommend it as it would lead to visually misaligned forms.

I'd second my answer, you need to set a base width to the FormField, either via width:

<RadzenFormField Style="width: 100%;">...</RadzenFormField>

or via flex-basis in case RadzenStack's orientation is horizontal:

<RadzenFormField Style="flex-basis: 100%;">...</RadzenFormField>

We might consider introducing a title attribute to the FormField's text label, so that a tooltip appears with the full label contents in case the label gets truncated.

6

It seems like I found a soluton. The issue was the flex style for the RadzenFormField (see he first code, at the first post of this theme):

<RadzenFormField
    AllowFloatingLabel="false"
    Variant="Variant.Flat"
    Style="flex: 1;"> @* remove the flex style *@
	...
</RadzenFormField>

This refers to both issues - with input field from the first post and with the date picker.

Strangely, that adding flexibility actually restricts the component. )))

Update. No, the truncation is not gone even after removing the "flex: 1". At leas not in all situations. It behaves better after adding "flex-grow: 1", but then it is stretched to the whole length of the form, which is also not suitable. And the truncation is not gone completely even after that. So, for now the better solutions is just to keep labels short, as advised by @yordanov .

7

Does this mean, it should be avoided to use long labels inside form fields? Because these long labels won't be wrapped to the second line of the label, nor the field would be stretched enough to hold the whole label in one line?

8

Yes, it is forms's design best practice that input labels must be short, unambiguous, and fully visible.

image
image1400×788 52.7 KB

Image Source -> Form design best practices. Learn how to improve the design of… | by Andrew Coyle | Medium

In case you need to explain a field in details, you can use Helper text:

image
image2510×1154 123 KB

2 Likes