Reactive Web - [Form dropdown widget inside popup styling issue]

I have a from inside a pop up. I could see the when there is a validation on a dropdown, it is not styling with a red border as an input field.

I have named the dropdown widget properly like other input widget in the form. 

I could see the "not-vaild" class is not getting tag to the proper DOM element. It is getting tag with "dropdown", where as it should be tagged to "dropdown-container". May be an assignment problem in OutsystemsUI script.

Work Around: Create your own Javascript to remove and add "not-valid" class to appropriate DOM element.

**Note: do not use jquery for this as it will hamper the performance.  

Rank: #272

Hi Palash,

Have you added dropdown name to the Form Label's input widget property appropriately, if not then you need to add this and set Mandatory property of dropdown to true?

Thanks :)

Rank: #272

I have tried this, and it's working fine for me.

Refer screenshots

Use Label widget for Input label (If you are using text), and set proper dropdown name in to Input Widget property of label as shown in screenshot

Hope it helps, Thanks :)

Rank: #287

Thanks Shweta Gedam. Have you tried it with in a pop up widget? Does it work for you inside a Pop up widget.

Rank: #272

No Palash, earlier i didn't tried with popup, sorry for that. But I observed the same problem which you have when i  used it with popup. 

There is one simple solution for this.


Just put following in the Attributes property of dropdown:

aria-invalid = If(Form3.Valid, False , True )

This is a pretty much solution for your issue, Hope it will help, Thanks :)

Rank: #287

Thanks for your help Shweta. but it did not work for me

Rank: #272

Can you share a sample OML reproducing your issue so that i can check what is exactly going wrong.