FormLayout - HelperText to the right?

I have layouts where I need to display long HelperTexts. Having them below the input field, wrapping over several lines, is not nice.
Is it possible to style the helper slot to be on the right instead?

It is easy enough to not use helperText, and instead add the text as a span to the FormItem, but it seems cleaner to use the feature that is already there.
image.png

formItem.add(new Span(helperText)) works, when the form is set to 100% width, but the wrapping is not nice.
Styling with “display: inline-block” moves the text below the field, which is not what I want.
image.png

you would have to apply display: inline-flex on to the slot ‘contentSlot’
image.png
image.png

create: (mytheme - your theme folder)
frontend/themes/mytheme/components/vaadin-form-item.css
inside have:

:host(.with-helper-text) #contentSlot {
    display: inline-flex;
}

on java side:

var checkbox1 = new Checkbox();
var formItem = layout.addFormItem(checkbox1, "checkbox 1");
formItem.add(new Div("Helper text here, we hope it shows properly and that it also wraps properly unlike when just adding it somewhere for some reason, I don't know where this is going."));
formItem.addClassName("with-helper-text");

Maybe there’s a better way to style it like this, but I couldn’t think of it, since that component is in the shadowdom.

I was afraid of that. I’ll try it tomorrow.
It is an interesting conflict between outer and inner styling.
Vaadin has done a lot lately to let us style from the outside, and so far I’ve been able to do everything. However, if we’re eventually forced to do inner styling anyway, what’s the point?
I assume the point is that the outer styling is part of the api, but Vaadin can change the inner structure at will, and break any inner styling I have.

That’s simple a private API; so expect breakage that any release.

yeah, that’s basically it: things that are exposed to ::part() selectors are unlikely to be broken in future versions, while those that are not are more likely to.

If you want to take that risk, you could, theoretically, modify the layout within the fields by changing the flex-direction of the <div class="vaadin-field-container"> to row (and presumably add some margin between field, helper and error. (Note that this will also move the error message out to the right of the helper, which you may not want.)

An even better solution, but no less at risk of breaking, and more complex, would be to change the div to a css grid and define areas within that layout for each part, and then set the appropriate grid area property to each of those parts. Come to think of it, you could also define an area for the label to the left of the field while you’re at it. That way you wouldn’t even need FormItem to get labels on the side. You’d probably need to tweak some dimensions on those elements too.

But at that point you’d be making some significant modifications to the css of each field component. Totally doable with css, but waaay more work and much more risky than adding that helper as a separate span.