Floating hint positioned incorrectly when textbox contains multiple lines

[EsaHeinonen]

Bug explanation

The floating hint (label) of a MaterialDesignFloatingHintTextBox falls behind the growing content area as multiple lines are entered in the textbox.

Here's a repo to demonstrate the issue:
https://github.com/EsaHeinonen/MDIXTest2

Version

5.1.1-ci680

[nicolaihenriksen]

@EsaHeinonen We, the maintainers, actually had a number of discussions on how the hint should behave in various situations (because there isn't really much help to find in the Material Design specification!). We went with an approach that caters for the most common use, which we believe is single-line TextBox. A multi-line TextBox can be achieved in multiple ways, and for each of them you will probably want to slightly tweak the hint to fit your use-case.

I your sample, I notice that you are only using TextWrapping=Wrap which indeed results in a multi-line TextBox when the content cannot fit inside the available horizontal space. In this case, I think your best option is to set VerticalContentAlignment=Top which will make the hint behave correctly. Depending on whether you have other non-multi-line controls in the near vicinity of this control or not, you may want to tweak the Padding as well to get an acceptable (vertical) alignment of the content.

Another common approach for a multi-line TextBox is to set AcceptsReturn=True which effectively let's the user control when text should drop to a new line, and not just depend on the wrapping. If this is acceptable to you, the combination of VerticalContentAlignment=Stretch and AcceptsReturn=True will also make the hint behave appropriately, but with the same caveats about possibly having to manipulate the Padding to get an acceptable (vertical) alignment with nearby controls.

For now I will close this issue because it is a scenario we have considered and made a deliberate choice about. If the approaches outlined above are not working out for you, feel free to re-open the issue and provide some more context so we see if further additions are needed in the template.