Hello there,
For my application I use the side menu layout (build-in UI). I want to hide it by default and show it once clicked on the hamburger menu (also for tablet and desktop), therefore I use the behavior 'Overlay'.
This works perfectly, only in ODC Studio the side menu stays visible (see screenshots). This makes that half of the screens are hidden, so this makes it difficult to develop. I tried to hide it using "-servicestudio-display: none;" but without any result.
I have changed some things to the layout with CSS, but this problem also occurs when you use a "clean" layout with side menu.
Any tips how to make it hidden in ODC Studio as well?
PS. I know there's also a Side Bar widget, but that doesn't work that well for me so rather fixed this issue.
Hi Eric,
It turned out to be a lot trickier than I anticipated, but I found a CSS combination that seems to work. Add this to your theme:
.aside-navigation { -servicestudio-position: absolute; -servicestudio-left: calc(var(--side-menu-size) * -1);}.layout.layout-side .main { -servicestudio-margin-left: 0px;}
Hi Eric van Heesen,
Try to use top menu instead of side till you are working. After finishing work just use side menu again. Unfortunately that's the only way you can do it
Thanks
Prince
Hi Aurelio,
That works perfectly, thanks!
Good to know! Don't forget to mark the reply as the solution. 😉
Hi,
I tried to do exacxtly the same as Eric and copied the logic above in our ODC tablet application... and it worked only half. The menu doesn't show at all! And there is no hamburger-icon to drag it into visibility.
We need to use the application on tablets in landscape mode with a resolution of 1920 x 1200. And we like to have the same UI as when used on a smaller device in portrait mode (where the menu slides in and out).
We already tried below with OnApplicationReady in where we set the SetDeviceBreakpoints to a TabletWidth of 2048. That doesn't work either.
Do you have another solution?