Ineke de Raaf
Rank: #920
99Views
17Comments
Solved
Reactive Web : validation message not showing on right of Dropdown widget
Question

hello,

I have an application where I want to show all my error messages to the right of the input field.

Only the Dropdown widget shows it underneath the field. I have tried many combinations, however the error message keeps on showing underneath and not on the right. 

The CSS I have changed for having the error on the right is:

but this seems only to be applicable to widgets other than Dropdown widgets. 

I think it has anything to do with the CSS for the container for the Dropdown widget

Could you please help?

thanks in advance!

0
0
on 2020-04-29
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17
Solution

Hi, try this if you only want to apply the custom CSS to the dropdowns:

.form .dropdown-container span.validation-message {
    bottom: unset;
    left: 100%;
    margin-left: 4px;
    position: absolute;    
    top: 10px;
}
See solution in context
0
0
on 2020-05-01
Copy link to comment
Ineke de Raaf
Rank: #920

Daniël Kuhlmann wrote:

Hi, try this if you only want to apply the custom CSS to the dropdowns:

.form .dropdown-container span.validation-message {
    bottom: unset;
    left: 100%;
    margin-left: 4px;
    position: absolute;    
    top: 10px;
}

Thank you very much for this. 

I put this in my customers application, it solves the issue for the drop down and it's displaying properly beside the field to the right as desired. 

I however needed to place component OutSystems UI 2.4.0. back to make my screens work again (because I needed to deliver my app). 

For 2.4.1 the error message of 'non' drop-down widgets came outside of the screen. I believe this has to do with the difference of the CSS in 2.4.0 (left) and 2.4.1 (right)


could that be the reason?

greetings,

Ineke de Raaf



0
0
on 2020-05-01
Copy link to comment
Ineke de Raaf
Rank: #920

I have added my example model

ReactiveWebPreviewerDemo.oml

0
0
on 2020-04-29
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

Hi Ineke,

If you replace all the CSS you put in the Demo screen with the following it should work:

Regards,

Daniel

.form span.validation-message {
    bottom: unset;
    left: 100%;
    margin-left: 4px;
    position: absolute;    
    top: 10px;
}
0
0
on 2020-04-29
Copy link to comment
Ineke de Raaf
Rank: #920

Daniël Kuhlmann wrote:

Hi Ineke,

If you replace all the CSS you put in the Demo screen with the following it should work:

Regards,

Daniel

.form span.validation-message {
    bottom: unset;
    left: 100%;
    margin-left: 4px;
    position: absolute;    
    top: 10px;
}

hello Daniël, thank you for your anwser. 

I however must say that when I apply this CSS the error message of the input_inputtext field is display out of the screen and the error message of the dropdown boxes is now very small and text is all vertical. 

Do I miss anything?


0
0
on 2020-04-30
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

Strange it shows well on my screen. Did you remove first all the CSS you had on the screen?

0
0
on 2020-04-30
Copy link to comment
Admin Synobsys
Rank: #46785

Daniël Kuhlmann wrote:

Strange it shows well on my screen. Did you remove first all the CSS you had on the screen?

thats a pity, to my demo screen it doesn't. I have removed all old CSS and put in yours:


0
0
on 2020-04-30
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

please share your oml once more

1
0
on 2020-04-30
Copy link to comment
Admin Synobsys
Rank: #46785

Daniël Kuhlmann wrote:

please share your oml once more

done. thank you for looking into it!


ReactiveWebPreviewerDemo.oml

0
0
on 2020-04-30
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

Hi Ineke,

In what browser are you testing, I use chrome and this is how your OML versions shows it, looking good!

Regards,

Daniel

0
0
on 2020-04-30
Copy link to comment
Admin Synobsys
Rank: #46785

Daniël Kuhlmann wrote:

Hi Ineke,

In what browser are you testing, I use chrome and this is how your OML versions shows it, looking good!

Regards,

Daniel

I also test in chrome. I think it depends on the versions of your OS UI? mine is:


0
0
on 2020-04-30
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

mine is 2.4.1

0
0
on 2020-04-30
Copy link to comment
Admin Synobsys
Rank: #46785

Daniël Kuhlmann wrote:

mine is 2.4.1

yes! that did the trick for the demo module, it's now the same as yours. Thank you!

now, when I implement it in the customer module where in fact it was needed, i get this screen:

The dropdowns are okay now! but it infected also the other error messages who were okay in fact. Is it possible to just only change the dropdowns?

0
0
on 2020-04-30
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17
Solution

Hi, try this if you only want to apply the custom CSS to the dropdowns:

.form .dropdown-container span.validation-message {
    bottom: unset;
    left: 100%;
    margin-left: 4px;
    position: absolute;    
    top: 10px;
}
0
0
on 2020-04-30
Copy link to comment
Ineke de Raaf
Rank: #920

Daniël Kuhlmann wrote:

Hi, try this if you only want to apply the custom CSS to the dropdowns:

.form .dropdown-container span.validation-message {
    bottom: unset;
    left: 100%;
    margin-left: 4px;
    position: absolute;    
    top: 10px;
}

Thank you very much for this. 

I put this in my customers application, it solves the issue for the drop down and it's displaying properly beside the field to the right as desired. 

I however needed to place component OutSystems UI 2.4.0. back to make my screens work again (because I needed to deliver my app). 

For 2.4.1 the error message of 'non' drop-down widgets came outside of the screen. I believe this has to do with the difference of the CSS in 2.4.0 (left) and 2.4.1 (right)


could that be the reason?

greetings,

Ineke de Raaf



0
0
on 2020-05-01
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

Could be, I have no means of testing this (or time to downgrade my OutSystemsUI version).

0
0
on 2020-05-01
Copy link to comment
Ineke de Raaf
Rank: #920

Daniël Kuhlmann wrote:

Could be, I have no means of testing this (or time to downgrade my OutSystemsUI version).

no problem Daniël, I understand. Thanks for helping me, this ticket is properly anwered. 



0
0
on 2020-05-01
Copy link to comment
Robert Madden
Rank: #11199

Dear OutSystems. 

Please do not use Absolute positioning for validation messages!

Rgds,

Everyone :)

0
0
on 15th Jan
Copy link to comment
Daniël Kuhlmann
mvp_badge
MVP
Rank: #17

The forum is not the best place to get the attention from OutSystems product teams. Its more for OutSystems community members. Post an Idea or add you comment on the OutSystemsUI Forge component support page, to get better traction.

1
0
on 15th Jan
Copy link to comment