Skip to Content (Press Enter)
2022-09-04 15-01-10
JayPea
51Views
6Comments
Solved
CSS class to move error messages beneath the input field?
Question
Reactive
Application Type
Reactive

Hi All,

Does anyone know if there is an in built CSS class to reposition field validation messages beneath input fields rather than to the right?

Thanks

0
0
24 Nov 2022
Copy Link
2021-08-12 11-00-27
Nordin Ahdi
 
MVP
Solution

Hi JayPea,

As an alternative you can follow this official guide to display input validation messages in a custom location. 

Regards,

Nordin

See solution in context
1
0
24 Nov 2022
Copy Link
2022-09-04 15-01-10
JayPea

Thank you @Nordin Ahdi.  This makes sense and is pretty straight forward to implement.

1
0
28 Nov 2022
Copy Link
2021-08-12 11-00-27
Nordin Ahdi
 
MVP
2021-04-17 09-53-48
José Gonçalves

Hi JayPea,

this is the class in the screen:

you can adjust the position of the message by changing its properties:

Regards


1
0
24 Nov 2022
Copy Link
2022-09-04 15-01-10
JayPea

Thanks for this but I was wondering if there was already a utility class that already existed. 

0
0
24 Nov 2022
Copy Link
2021-08-12 11-00-27
Nordin Ahdi
 
MVP
Solution

Hi JayPea,

As an alternative you can follow this official guide to display input validation messages in a custom location. 

Regards,

Nordin

1
0
24 Nov 2022
Copy Link
2022-09-04 15-01-10
JayPea

Thank you @Nordin Ahdi.  This makes sense and is pretty straight forward to implement.

1
0
28 Nov 2022
Copy Link
2021-08-12 11-00-27
Nordin Ahdi
 
MVP
2025-06-01 02-51-51
YASH PAL

Hey 
Jaypea 

I achieved the same by positioning the bottom property to 0.

Just set span.validation-message{ bottom: 0;}

0
0
25 Nov 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.