Hello Experts,
I have a question for you about Responsive Design, using a Panel Component.
What is my goal ?
My screen have to be split in 2. I want to have a top Panel and a bot Panel. (50%/50% size)
Then i want to have the possibility to hide the top Panel by clicking a button, in order to let the other panel take the full screen (Panel with a graph component).
How i did that for now ?
For exemple, we will take a screen with 500px height.
Top panel has Height = 250px and Top Margin = 0
Bot panel has Height = auto, Bot Margin = 0 and Top Margin = 250px
Then if i clic the button, i set top panel not visible, and bot panel has Top Margin = 0.
So this way, my bot panel take all the screen and it's OK.
My issue ?
My development is done with a screen size 1600*900. But some users has 1366*768 so in this case, my panel is not working anymore because i use static dimension (250px) so KO.
About Responsive Issue :
I know the best practice is to use a Grid Layout (in my case with 2 rows with same dimension).
But how can i hide the top row and let the bot row take all the screen if i use a grid layout ? There is no way in Design Studio to change the height of Grid Layout's Rows or Columns by scripting.
How can i script on clic button : component use the space of row 1 + row 2 in my grid layout ? Without using static dimension ?
Thank all for the question, it will help me a lot for responsive design issue.