Hi,
As you can see from the picture, I have issues with displaying my validation messages. I have three smaller inputs and if all three or two are validated wrong, they overlap and the middle and right one even fall off screen.
Now the easiest way would be to increase the size of each input and put them underneath each other, but is there any way this situation can work? That the messages don't fall off screen and won't overlap.
Hope to hear from the community! Thanks in advance
Without having access to the app I can suspect a few things:
If possible add the CSS to the post so I can see what's happening.
Hope it helps,
Ricardo Pisco.
Hi Vicky,
Are you wrapping up each input box like below in the parent container:
because if you follow this approach then your validation message will get wrapped inside the container and do not get overlapped.
Thanks,
Manish Jawla
Hi Manish,
Thanks for your quick response! I have the label and the input in the same container, that's the issue then. I will try this!
Vicky
Please let me know if that helps.
My setup is like this at the moment, but the error messages keep overlapping and going off screen. Does the label need to be in its own container as well?
Did you check the CSS applied to the error message?
If the error message is in a div with a width limit and still keeps overlapping, it probably means that the CSS property is doing that.
You can test what I'm talking about in this link 'CSS white-space property (w3schools.com) '.
Just check if the CSS property for the error message is set to 'white-space: normal;'.
Hope it helps.
Best regards,
Hi Ricardo,
Thanks for your reply! I checked out the css on the message, and it indeed said whitespace: nowrap; . I changed it to 'normal' which resulted in the picture attached. At least it fits the input width :p
Any suggestions on how to change the position?
I think that's again a CSS issue, what value you have on the Position property?
It should be 'position: relative;', can you put here the full CSS for the error message?
Thanks for your quick response. I was using the OutSystemsUI CSS:
Which i had overwritten in my own theme. I'll try and change the position!
That's the problem, you need to change it to 'position:relative;' and the problem should be solved.
We're getting closer:
weirdly enough there's still a lot of white space in between.
Thanks Ricardo! I will try this and get back to you
Problem is fixed! below is the final CSS. there was a margin placed with inline css that messed up the placement of the error message. It's still weird that the reference oml provided by Manish didn't do the same in my app, but with your suggestions I made it work. Thanks!
Please find the attached sample oml for reference.
Regards,
Thanks for the reference oml. I compared it to my own, and even if I have exactly the same, behaviour on mine is still as before. I try to look into what's causing this.
Hi everyone
I have an issue where my input warning message is not wrapping.
i have created a custom CSS class the same as @Vicky Mekes however when i apply it on the input it will not work. it is being overridden by the default .
issue:
i applied my custom class on the input:
it's not showing when i inspect the validation message on the page, it shows the default class.
i'd be open to other ways of wrapping the text...