Layout issues: Icon aspect ratio 1:1 of the height and fill the rest with another widget

I’m currently trying to create a cast bar where an icon is on the left side of the bar with an aspect ratio of 1:1 and the rest of the bar on the right side shall be filled with a progress bar.

My goal is to make the Icon occupy a width equal to the height of its parent and fill the rest of the widget with the progress bar.

Sadly I was unable to create this behaviour because selecting Size: “Fill” for the hierarchy and widget splits the space of the Horizontal Box equally although the Icon does not occupy more width than its height as shown below:

image

Setting the “Size Box” of the Icon to “Size: Auto” does not stretch the Icon to the available height anymore, or does not allow the Progress Bar on the right to occupy the remaining space:

Is anyone aware of how to achieve my desired result, so that the Icon occupies a width equal to the height of its parent and fill the rest of the widget with the progress bar?
The ideal result should always look similar to this:

3 Likes

I am trying to do this as well. Have you found a solution?


Ok I got something that worked. They key is using “Scale to Fit Y” on the scalebox that contains your square icon. Everything in the widget’s hierarchy should use fill horizontal and fill vertical.