Input validation error overlaps with another and falls off screen
Question
Application Type
Mobile

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

MicrosoftTeamsimage9.png

Hi,

Without having access to the app I can suspect a few things:

  • There's something after the input that's causing the message to go down - try and find what it is and remove it
  • The Top CSS property as a value and should be 0
  • We can go back and use the absolute position and add the top property with the height pixels the input takes like 'top:50px;' (use the inspect in the browser to find the correct value)

If possible add the CSS to the post so I can see what's happening.

Hope it helps,

Ricardo Pisco.

mvp_badge
MVP

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! 

Thanks,

Vicky

mvp_badge
MVP

Hi Vicky,

Please let me know if that helps.

Thanks,

Manish Jawla

Hi Manish,

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?

Screenshot20210319085420.png

Hi Vicky,

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,

Ricardo Pisco.

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?

Best regards,

Vicky

validationerrorTry2.png

Hi,

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?

Best regards,

Ricardo Pisco.


Hi Ricardo,

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! 

Thanks,

Vicky

Hi,

That's the problem, you need to change it to 'position:relative;' and the problem should be solved.

Hope it helps,

Ricardo Pisco.

Hi Ricardo,

We're getting closer: 

weirdly enough there's still a lot of white space in between. 

Hi,

Without having access to the app I can suspect a few things:

  • There's something after the input that's causing the message to go down - try and find what it is and remove it
  • The Top CSS property as a value and should be 0
  • We can go back and use the absolute position and add the top property with the height pixels the input takes like 'top:50px;' (use the inspect in the browser to find the correct value)

If possible add the CSS to the post so I can see what's happening.

Hope it helps,

Ricardo Pisco.

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!

mvp_badge
MVP

Hi Vicky,

Please find the attached sample oml for reference.


Regards,

Manish Jawla

TestApp.oml

Hi Manish,

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. 

Thanks,

Vicky

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.