How to change the height of a button according to the height of the text in it?

Question

Hello.

How would you do if you had a vertival layout composed of buttons and you wanted: - the witdth of the buttons to be the same witdth as the vertical layout - the height of each button to be driven by the text inside it

The solution has to work by code as I create each elements by script.

I have tried to follow the doc but it does not work: https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

I tried to use "contentSizeFitter" I tried to use "LayoutElement" I tried to use a vertical or horizontal layout on each buttons and desactivate childforcesWidth I tried a lots of more stuff.

I run unity 2020.3.24f1 LTS on windows

Even manually I cannot seem to find a system that works.

Anywone?

Thanks in advance.

Answer 1

Answer by mf41z · Jan 13 at 11:53 AM

You need to add a content size fitter to the buttons as well, if you're adding different shapes of text, so the button will fit the size of the text component. Try to explain better how you've set up these objects, with pictures and such, so I can have a better idea of how you're doing things

Add comment · Share

Answer 2

Answer by jeanf_le · Jan 13 at 02:15 PM

alt text

There is a contentsize fitter both on the TMPUGUI and the Button It looks fine before play and when i press play it acts wierdly. When I tweak the values of the vertical layout, eg the padding, it gradually turn back to normal.

The problem seem to come to the content size fitter on the button but I did not find a better way to get this setup working.

I am trying to think that I am going to need to code my own grid system. Seems ridiculous.

uibug.jpg (452.7 kB)

Add comment · Show 4 · Share

jeanf_le · Jan 13 at 03:17 PM 0

Share

Oh, also I added a VerticalLayout Component on the Button, somewhow works better. childControlWidth is true, everything else is fasle.

The "trick" I use atm is to launch a coroutine to change/changeback the values of the top vertical layout like bellow.

private IEnumerator DoMagic(VerticalLayoutGroup layout) { layout.padding = new RectOffset(11, 11, 11, 11); yield return new WaitForSeconds(.01f); layout.padding = new RectOffset(10, 10, 10, 10); yield return new WaitForSeconds(.01f); layout.childForceExpandWidth = true; yield return new WaitForSeconds(.01f); layout.childForceExpandWidth = false; yield return new WaitForSeconds(.01f); layout.childForceExpandWidth = true; }

If i run this coroutine after i created the whole thing it kinda works but one can see the transitions so it is a very ugly solution.... would like to find a proper way so that I can animate each buttons afterwards.

mf41z · Jan 13 at 09:08 PM 0

Share

How are you parenting the buttons? Whenever you parent something, do transform.SetParent(Transform parentTransform, false); I had problems with bad fittings and when I started turning the WorldPositionStays argument to false, my fittings worked.

Also, if you're tweaking values during play, make sure you edit them back once you've stopped the run, because changes made during play aren't usually saved.

jeanf_le mf41z · Jan 13 at 09:28 PM 0

Share

Here is what I do when I create a gameObject that i need to make as Child

  public static GameObject AsChild(this GameObject tmp, GameObject parent, ref List<GameObject> instanciatedObjects)
         {
             tmp.transform.SetParent(parent.transform, false);
             //tmp.transform.Reset();
     
             tmp.layer = 5;
             instanciatedObjects.Add(tmp);
     
             return tmp;
         }

Then I call:

 GameObject canvas = new GameObject("title").AsChild(this.gameObject, ref aListToKeepTrackOfThem);

mf41z jeanf_le · Jan 13 at 10:27 PM 0

Share

Why do you have a horizontal fitter inside the button? I don't see why that's there. The content size fitter whould be enough. Also, I think the problem is that both content fitters, the parent and the one inside the button, are trying to modify the position. Try removing the Content size fitter from the Button, and if that doesn't work, remove the one from the Text. That's what I would do

How to change the height of a button according to the height of the text in it?

2 Replies

Your answer

Follow this Question

Related Questions