121
Views
9
Comments
Solved
[Reactive Sidebar with Overlay] IsOverlayClickable not found
reactive-sidebar-with-overlay
Reactive icon
Forge asset by José Pedro Proença
Application Type
Reactive
Hello, I can't use the "isOverlayClickcable" functionality. the gray overlay does not appear on the screen. Can anyone help me?
I have the latest Outsystems UI updates
2025-08-07 06-30-56
Amit J
Champion
Solution

Hi just add the below CSS. 

.sidebar.sidebar-open::before {
display: block !important;
}




IN New UI update they add a new class with display:none. that is why it was not working.

i hope you got my point.



ReactiveSidebarwithOverlayDemo.oml
2025-08-07 06-30-56
Amit J
Champion

Is it helpful Filipe Sousa?

UserImage.jpg
Filipe Sousa
2025-08-07 06-30-56
Amit J
Champion

Wow

So can you mark this as a solution and close this thread.

Thanks

2021-01-21 14-05-49
José Pedro Proença
 
MVP
Solution

Hi everyone, I'm with the team that developed this component.

Indeed with the latest version of OutSystemsUI the overlay is not visible. A CSS class must be added. We'll upload a new version of the component that fixes this issue.

I'll post a new answer as soon as we've done that, later today.


2021-01-21 14-05-49
José Pedro Proença
 
MVP

A new version of the component has been published to solve the issue above.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8702&ProjectName=reactive-sidebar-with-overlay

However I discovered that the Sidebar from OutSystemsUI was updated as well and now has a clickable overlay and new client actions.

The version of the sidebar used by this component is now deprecated, so all apps using this component should transition into using the updated Sidebar block from OutSystemsUI since that is the version that will have better maintenance and stability.

UserImage.jpg
Filipe Sousa
With the new version of outsystemsUi, IsOverlayClickable
doesn't work. Can anyone help me?
2025-08-07 06-30-56
Amit J
Champion

It may be due to css issue. Can you share your sample oml?


I can see the overlay. Can you check this highlighted class? you can check with change background-colour property.


UserImage.jpg
Filipe Sousa
I tested it with OutsystemsUi version 2.6.9 and it works, but with the latest version (2.8.0) it doesn't.
ReactiveSidebarwithOverlayDemo.oml
2025-08-07 06-30-56
Amit J
Champion
Solution

Hi just add the below CSS. 

.sidebar.sidebar-open::before {
display: block !important;
}




IN New UI update they add a new class with display:none. that is why it was not working.

i hope you got my point.



ReactiveSidebarwithOverlayDemo.oml
2025-08-07 06-30-56
Amit J
Champion

Is it helpful Filipe Sousa?

UserImage.jpg
Filipe Sousa
2025-08-07 06-30-56
Amit J
Champion

Wow

So can you mark this as a solution and close this thread.

Thanks

2021-01-21 14-05-49
José Pedro Proença
 
MVP
Solution

Hi everyone, I'm with the team that developed this component.

Indeed with the latest version of OutSystemsUI the overlay is not visible. A CSS class must be added. We'll upload a new version of the component that fixes this issue.

I'll post a new answer as soon as we've done that, later today.


2021-01-21 14-05-49
José Pedro Proença
 
MVP

A new version of the component has been published to solve the issue above.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8702&ProjectName=reactive-sidebar-with-overlay

However I discovered that the Sidebar from OutSystemsUI was updated as well and now has a clickable overlay and new client actions.

The version of the sidebar used by this component is now deprecated, so all apps using this component should transition into using the updated Sidebar block from OutSystemsUI since that is the version that will have better maintenance and stability.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.