hi there I'm using a sidebar in my application that has overlay true. but that has a problem if the user clicks outside of the sidebar it closes i don't want to close the sidebar if the user clicks outside of it
Hi Bala,
I have attached the OML file for your issue. This will be useful for you.
Use this CSS..sidebar.sidebar-open::before {display: block !important;}
Thanks,
Dhivyaraj Sivam
Hi Divya,
This post is for Traditional web.
Regards,
Wasimkhan S
Hi,
You can set overlay to "False".
hi @Wasim Khan sif I set overlay to false means that will allow the user to interact with the screen I dont want the user to access the screen input box are accessible when the sidebar is open and it should not close when the user clicks outside of the sidebar
Thanks,bala
please refer this documentation.
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_traditional_web_patterns/navigation/sidebar/
Amreen
thanks for your answer @Dhivyaraj Sivam but it is not working the side bar is closing on clicking outside of it
Did you try by setting value as false?
yes @Wasim Khan but it will allow the user to interact with the screen i don't want to user to interact with the screen when sidebar is active only the user can change the values in sidebar
This is the behavior of side bar. If we set the Overlay as "True".
On click action is triggered to hide the side bar. as it is added on onclick of that container.
You can take a clone of this side bar from OutsystemsUI and remove the onclick action and try using it in your app and check. It may work.
Sample: https://wasim.outsystemscloud.com/Test/Sidebar.aspx?
Hello,
You can do this using only CSS. Add this CSS to your theme:
.sidebar.is--visible .sidebar-overlay { pointer-events: none;}
Correct me if I am wrong.
This will remove the pointer and does not close the side bar but it still it will allow user to interact with the screen.
No, it will remove the pointer cursor AND prevent all pointer interactions with that specific element.