Auto sizing background

Hersir

Hi,
trying to implement container that would size it self to its children. is it possible in feather ui ?

my current attempt:

final layout = new LayoutGroup();
layout.variant = MY_VARIANT;
layout.addChild(MY_CONTENT);

function MY_VARIANT_STYLE(group: LayoutGroup) {
        group.backgroundSkin = new Scale9Bitmap(texture, new Rectangle(8, 31, 186, 178), true);
}

if I do it like this layout group is as big as the image what is added as background skin.
I trued to play with width / height / layouts data but could not find a way to make bg stretch to content.

probably missing something simple 🙂

Thank You

joshtynjala

Try this:

var backgroundSkin = new Scale9Bitmap(texture, new Rectangle(8, 31, 186, 178), true);
backgroundSkin.width = 0;
backgroundSkin.height = 0;
group.backgroundSkin = backgroundSkin;

Basically, the original width and height of the background skin are used as minimum values (unless it implements IMeasureObject and has minWidth/minHeight properties, which take precedence). By setting both to zero, the LayoutGroup will use only the children for measurement.

Hersir

Hi, joshtynjala
tried this out but still skin is bigger then content (both height and width), I use HTML5 target, maybe something there.

exact code that replicates it

final groupLayout = new VerticalLayout();
groupLayout.setPadding(10);

final group = new LayoutGroup();
group.layout = groupLayout;
group.variant = MY_VARIANT;
this.addChild(group);
            
final button = new Button("my button");
group.addChild(button);

joshtynjala

Well, you have 10 pixels of padding in the layout, so the backgroundSkin will be 20 pixels wider and taller than the content. Or is it another issue? A screenshot may help.

joshtynjala

I guess there's one other thing worth mentioning. Scale9Bitmap only resizes the sections that are meant to scale, even if you set its width smaller than left + right or its height smaller than top + bottom. If you resize it smaller, the sections that don't scale may start overlapping.

I should probably resize those sections too, in that special case. However, that may still be less than ideal. Those sections may start to look distorted instead. In general, it's best to avoid resizing smaller than your scale9Grid allows.