Currently, I am undertaking a project in Angular 9 and utilizing Material design.
If you want to view a demo of my work, you can find it here: https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html
In my project, I am using inputs with mat-hints. These hints typically consist of small snippets of text, but there is a chance that the text may be quite lengthy. As a result, I am looking for ways to make the mat-hint more responsive in such cases.
My preference would be for the mat-hint to display all the text without overflowing onto the next input field. At present, however, the text overflows as shown in this image: https://i.stack.imgur.com/ZrFVB.png I aim to have the text push the following input field down to accommodate its length. While I attempted changing the display property to block, it did not yield the desired outcome.
It is crucial that the styling changes do not impact the other mat-hint which displays "Required!".
If achieving the above goal proves challenging (without affecting "Required!" or requiring extensive SCSS modifications), I am open to implementing a max-height on the mat-hint and handling overflow text with ellipsis. Unfortunately, setting a max-height results in cut-off text without the desired ellipsis effect, even after including text-overflow: ellipsis.
Any recommendations on how I can make the styling more user-friendly and responsive are greatly appreciated! Thank you in advance for your insights and suggestions.