Button auto sizing issue

Hersir

Hi,
have following layout: LayoutGroup with multiple button as children

Layout group have such layout set to layout property.

buttonLayout = new VerticalLayout();
buttonLayout.horizontalAlign = HorizontalAlign.JUSTIFY;
buttonLayout.gap = 10;
buttonLayout.paddingBottom = 10;
buttonLayout.paddingTop = 10;

at first buttons have temp text that is quite wide, but after real text is loaded, each button gets it text property updated.

if text is updated while I am still on the view, buttons will have old size (from temp) with new text, but after view switch they get smaller size

is it expected behaviour? or maybe I miss some flag ?

thank you

Full code

<LayoutGroup layout=${buttonLayout} layoutData=${buttonsLayoutData}>
                <for ${button in allButtons}>
                    <Button
                        ref=${registerButton}
                        name=${Std.string(button)} 
                        text=${languageState.getText(labels[button], "mainMenu")}
                        onTrigger=${onClick}
                    />
                </for>
            </LayoutGroup>

joshtynjala

Hersir if text is updated while I am still on the view, buttons will have old size (from temp) with new text, but after view switch they get smaller size

I'm trying to make sure that I understand what you mean here

When you say "after view switch", do you mean that you remove the view that contains the buttons, and then, you add it again later?
When you add it again later, do you add the same instance of the view, or is a new instance created?
If it's a new instance that's different than the first instance, could the difference be that the "real text" is already loaded the second time, so the new instance never displays the longer, temporary text? That could certainly explain why the size is different.

Hersir

Trying to understand if its issue with feathersui or its because of coconut wrapper around

Hersir

joshtynjala

1) Yes by switch I mean removing view completely and then creating new one (go to next view and back)
2) Difference on second show is that it gets correct text immediately as text is already loaded so it gets correct size, on first attempt it have temp text thats much longer then one thats loaded from file and changes it after text is loaded (text property update)

joshtynjala

Hersir Difference on second show is that it gets correct text immediately as text is already loaded so it gets correct size, on first attempt it have temp text thats much longer then one thats loaded from file and changes it after text is loaded (text property update)

Okay, so it means that this is the expected behavior. Because you are using JUSTIFY, the width of the buttons is set explicitly, and they won't resize when the text changes.

If you would like them to resize when they receive new text, it can probably be done somewhat manually.

First, set justifyResetEnabled to true on the VerticalLayout. That should ensure that the buttons are given the chance to measure themselves again. Basically, it resets the explicit width set by JUSTIFY every time that the layout code is run.

Then, you need to force the LayoutGroup to run its layout code again. There are many ways to do that.

You might set layout to null, and then back to the VerticalLayout.
You could dispatch Event.CHANGE from the VerticalLayout
You could call setInvalid(LAYOUT) on the LayoutGroup.

I'm sure there are more options. Since you're using Coconut, it might be a little trickier than with pure Haxe, so I gave you a few options.

Hersir

on more thing buttons have property includeInLayout = false; at first and only when they are showen tis set to true

Hersir

Thank you joshtynjala looks like justifyResetEnabled did the trick alone, will make more tests if extra layout update is needed