Reactive Web : validation message not showing on right of Dropdown widget

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!

I have added my example model

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;
}

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?


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

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:


please share your oml once more

Daniël Kuhlmann wrote:

please share your oml once more

done. thank you for looking into it!


Hi Ineke,

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

Regards,

Daniel

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:


mine is 2.4.1

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?

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;
}
Solution

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



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

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.