Topic: Validation feedback messages don't always space properly
Expected behavior I've noticed that when using MDB5 custom validation, the .valid-feedback and .invalid-feedback divs don't always space properly with the input fields below the validated field. Expected behavior is that the element below the validated input field is 'pushed down' far enough to accommodate the feedback text regardless of the screen width or the length of the feedback text (if word wrapping is required)
Actual behavior Sometimes the validation feedback messages overlap the elements below them.
Resources (screenshots, code snippets etc.)
This is a screen shot right from the MDB5 documentation page for form validation, with a phone sized window. The same effect can be observed on a desktop sized window by changing the feedback text to something long enough to wrap.
Thank you for the feedback.
We understand the concern, however, depending on the layout and overall design of a project, different users expect different behaviors in how the validation messages interact with surrounding elements. For that reason, MDB does not enforce a strict spacing behavior by default.
It is up to the developer to adjust the form layout accordingly — for example by adding margins, spacing utilities, or structural wrappers — to ensure that there is enough room for validation feedback in their specific context (especially in responsive scenarios or with longer text). This gives you full control over how the form behaves visually.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No