Container height


I have a player video. It can be visible or not.

I want the button under the player (with the text “module”) stays at the same place when the player is visible or not. When there is not the player the button goes up.

I try with a container (grey rectangle) but the size (height) of the container depends on what is inside.

when you click on your button, you will see on the top left hand corner of the screen, an option for “visibility”. if you click on it you will see this.
Screen Shot 2022-04-25 at 19.31.56

Try it for a start

The problem is not a visibility matter.
The player is a list and when the list is loading (sometimes 5 seconds, sometimes 1 second) the player is not visible and the button goes up. When the player is loaded it moves down the button .
These up and down for the button are not really nice for the users.

Have you tried using an invisible rectangle?

You could have that invisible rectangle behind the player, covering the same area/space as the player. In this way, even when loading the information, the rectangle will always be there, not allowing the button to move.

But not to use the rectangle as a container ?

It works with a thin rectangle:

But if the rectangle is too large, it doesn’t work, any idea why ?:

The rectangle for the container and the rectangle to keep the buttons in place are two different ones.

First, design everything as you would like to see it.

Then add the new invisible rectangle to keep the buttons in place.

It’s a trial and error thing. Try different variations until you find one that suits your needs.

Using invisible rectangles is a very common trick used to hold elements in place when needed.

1 Like

Thank you. It works after some trial and error tests.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.