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:

.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:

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:

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:

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:

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?

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

Daniël Kuhlmann wrote:

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

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: