21
Views
5
Comments
Solved
RE:Upload Widget's Validation Message Position
Question

Hello,


I am posting this since I haven't replied to the last post for quite some time and I think the previous thread receives no more traction, I apologize for the inconvenience.

I implemented this simple sidebar, in Reactive Web, that allows user to upload a document and give a description to the document in which all the fields (2 of them) mandatory. But upon validating the 2 inputs (including the upload widget), the validation message for the upload widget is shown in a very inconvenient position while the input's validation message is shown correctly. 

How do you position the validation message for the upload file such that it would follow the manner in which the Description input's validation message is being displayed? I tried to edit the CSS properties of  span.validation-message but upon editing the margin/padding of span.validation-message the Description Input's validation message also follows suit. I am wondering on how to edit the span.validation-message of the Upload Widget by itself.


Let me know if you have any ideas,


Yosua

mvp_badge
MVP
Rank: #18
Solution

Hi Yosua,

Let me start by saying this seems to be an odd behavior for validation messages. I'll bring it to the attention of the team and see if it is something they can replicate. If you can fill out the "Send Feedback" report through Service Studio and share the OML where you are seeing this I'm sure they will be keen to take a look.

Meanwhile, to workaround it you can refer to the validation message of any Upload widget with the following CSS selector (determined by analyzing the above screenshot):

.upload-file .validation-message

which would read: select all elements with class validation-message that are descendants of elements with class upload-file.

Hope this helps
Rank: #137

Hi Yousa,

You can overwrite the CSS according to the attached screenshot below.


Hope this will help you.

Vijay M-

Rank: #1450

Hi Vijay,


Thank you for replying! If I may break down your approach:

1. Give margin-bottom to the input widget so that it has more space in the bottom

2. Position span.validation-message so that it shows up at the bottom of the widget as opposed to the center of the widget.

Feel free to correct me if I am wrong with guessing your approach. Assuming that was how you approach this, what if you don't get to change the margin to the 2 widgets, how do you change the margin/padding of Reactive Web's Upload Widget's span.validation-message without changing the input widget's (or any other widget for that matter) span.validation-message styling?

Also is this the default behavior of the current Upload Widget's validation message?



Thank you,


Yosua

mvp_badge
MVP
Rank: #18
Solution

Hi Yosua,

Let me start by saying this seems to be an odd behavior for validation messages. I'll bring it to the attention of the team and see if it is something they can replicate. If you can fill out the "Send Feedback" report through Service Studio and share the OML where you are seeing this I'm sure they will be keen to take a look.

Meanwhile, to workaround it you can refer to the validation message of any Upload widget with the following CSS selector (determined by analyzing the above screenshot):

.upload-file .validation-message

which would read: select all elements with class validation-message that are descendants of elements with class upload-file.

Hope this helps
Rank: #1450

Hi Jorge,


That works perfectly, thank you! I'll be sure to leave a feedback regarding this issue.



Cheers,


Yosua

Staff
Rank: #324

Hi Yosua,

Thanks for reporting this. And, answering your question, no, this is not the default behavior (or at least it shouldn't be).

It appears we have introduced some regression on the validation message, and our teams are looking into it. I'll update this thread once we have more details.

Regards,

Ricardo Alves