I attempted to implement a draggable split screen using the provided .oml from the forum question I had posted in: Horizontal Draggable Split Screen | OutSystems. However, my requirements included keeping the split screen hidden when the main screen loads and only displaying it when a row or column in the datagrid in the top panel is clicked. While I managed to achieve the hiding functionality using a boolean value, I’m facing an issue with the height of the top panel.
Currently, when the screen loads, the top panel only occupies 50% of the page height. I have tried adjusting the height dynamically using conditions in the style properties of the containers and even attempted to remove the default height via CSS, but without success. Additionally, if I set the top panel’s height to 100% initially, the bottom panel only becomes visible upon zooming out. Another requirement is that the top panel contents should fit according to the resizing. Kindly help with a solution here.
you can remove class at initialization and then add it again based you condition.
Please check the oml file
I have tried the same, but unfortunately didn't solve the issue in my application. It throws a "Cannot read properties of null (reading 'classList')" error in the OnClick JS. Also the split screen wasn't draggable with the JS applied. I have tried to set a timeout for the DOM elements to load, but didn't help either.
Hi @Karthik Santosh
If I understand your issue correctly, when you initially hide the split area and later show it on row click, the container does not recalculate automatically, so the top panel remains at the previously calculated 50% height, regardless of what CSS you apply later.