16
Views
2
Comments
Solved
[OutSystems UI] Sidebar overlay property was removed from OutSystemsUI
Forge component by OutSystems R&D
94
Published on 28 Dec 2020
Application Type
Reactive

Hi,

The sidebar overlay property was removed from OutSystemsUI (Reactive).

Traditional Web:

Reactive Web:

How to implement this effect?

I found this CSS classes in the OutSystemsUIWeb Base Theme (Traditional Web) that is added when the sidebar is opened:

.sidebar-overlay {

    background-color: rgba(190, 190, 190, .25);

    cursor: pointer;

    height: 100vh;

    opacity: 0;

    pointer-events: none;

    position: fixed;

    right: 0;

    top: 0;

    width: 100vw;

    z-index: 103;

    -servicestudio-display: none;

}

And this in the Reactive Web:

.sidebar.sidebar-open {

    -webkit-transform: none;

            transform: none;

    -webkit-transition: all 330ms ease-out;

            transition: all 330ms ease-out;

    will-change: transform;

}


Rank: #286
Solution

Hi Leandro,

Please take a look at the attached oml file, it will solve your problem.

Here is the link for the demo also : 

https://shweta-gedam.outsystemscloud.com/SidebarOverlayDemo/SidebarOverlay

Let me know in case you face any issues. Thanks :)


SidebarOverlayDemo.oml

mvp_badge
MVP
Rank: #159

Hi Shweta Gedam,

Thank you so much!!!

It's working fine! I only added this attribute to send to behind in the Service Studio.

-servicestudio-z-index: -2;