Palash Debnath
Rank: #287
11Views
6Comments
Reactive Web - [Form dropdown widget inside popup styling issue]
Discussion
Reactive
OutSystems 11

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.  


0
0
on 22th Jan
Copy link to comment
Shweta Gedam
Champion
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 :)

0
0
on 22th Jan
Copy link to comment
Shweta Gedam
Champion
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 :)

1
0
on 22th Jan
Copy link to comment
Palash Debnath
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.


0
0
on 22th Jan
Copy link to comment
Shweta Gedam
Champion
Rank: #272

Replying to Palash Debnath's comment on 22 Jan 2021 12:33:20

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.

Solution:

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

0
0
on 22th Jan
Copy link to comment
Palash Debnath
Rank: #287

Replying to Shweta Gedam's comment on 22 Jan 2021 13:01:39

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

0
0
on 22th Jan
Copy link to comment
Shweta Gedam
Champion
Rank: #272

Replying to Palash Debnath's comment on 22 Jan 2021 14:27:30

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


Thanks

0
0
on 22th Jan
Copy link to comment