So i just imported an instance of a ui document into my menu panel and i want it to be at the bottom of the ui panel.
But if i set it to position → relative → top = 100% - its not quite what i want.
I want the contents to still be inside my panel but at the bottom of it whilst anything else will be from top down.
So i basically want it in the red area, even if i resize my panel i still want it to stay relative to the bottom.
How do i do this? I can’t figure out…
A quick way to do it to set it’s position to absolute, it’s bottom to 0px, and it’s height to a fixed value. Then, in your menu, you add the #ProgressBar’s fixed height to its padding-bottom.
It’d probably be cleaner in the long run if you add one #menu-content element and one #menu-footer to your menu element. Then you just add the #ProgressBar to the footer, along with anything else that needs to appear at the bottom. As long as you don’t set a fixed height to the whole menu, the footer should appear at the bottom. If you need to have a fixed height for the whole menu, you can instead set the height of the #menu-content and/or a max-height for the whole menu.
EDIT
I was thinking, in the second idea, you can have a fixed height for the whole menu if you add an empty element before the footer that has a flex-grow and a flex-shrink of one. It will occupy any empty space that’s left and push the footer to the bottom.
This could also work without the footer and content elements for a quick solution. If you add that element before your progress bar, it should push your progress bar to the bottom.
