Search Unity

Question Vertical Layout Group causing UI objects to collapse in on themselves

Discussion in 'UGUI & TextMesh Pro' started by Linkoma, Nov 28, 2023.

  1. Linkoma


    Sep 14, 2023
    This is my first post on here, so excuse me if my formatting is bad.

    I have a Vertical Layout Group encompassing a few buttons.

    I'm using keys to select (Input Action Asset maps to Event System). In the Build, making a selection causes the button positions to momentarily reset but then collapse again. In the Editor, it functions correctly.

    In the Build:


    In the Editor:


    On each button (all based on the same prefab) is a script that moves its position slightly to the right or left when selected.

    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using TMPro;
    4. using UnityEngine;
    5. using UnityEngine.EventSystems;
    6. using UnityEngine.UI;
    8. public class MenuButtonMove : MonoBehaviour, ISelectHandler, IDeselectHandler
    9. {
    10.     public float moveAmount = 100.0f;
    11.     public float speed = 100.0f;
    12.     public bool isMoveRight = false; // used to control whether button moves left or right on select
    14.     private Vector3 leftPos;
    15.     private Vector3 rightPos;
    16.     private Vector3 currPos;
    18.     private void Start()
    19.     {
    20.         if (isMoveRight)
    21.         {
    22.             rightPos = transform.position;
    23.             leftPos = transform.position + Vector3.left * moveAmount;
    24.             currPos = rightPos;
    25.         } else // !isMoveRight
    26.         {
    27.             leftPos = transform.position;
    28.             rightPos = transform.position + Vector3.right * moveAmount;
    29.             currPos = leftPos;
    30.         }
    31.     }
    33.     private void Update()
    34.     {
    35.         transform.position = Vector3.MoveTowards(transform.position, currPos, speed * Time.deltaTime);
    36.     }
    38.     public void OnSelect(BaseEventData eventData)
    39.     {
    40.         if (isMoveRight) { currPos = leftPos; }
    41.         else { currPos = rightPos; }
    42.     }
    44.     public void OnDeselect(BaseEventData eventData)
    45.     {
    46.         if (isMoveRight) { currPos = rightPos; }
    47.         else { currPos = leftPos; }
    48.     }
    49. }
    When the script is deactivated or the vertical layout group deactivated, the problem disappears, so it has something to do with one of these two things.
    Last edited: Nov 28, 2023
  2. Kurt-Dekker


    Mar 16, 2013
    I'm gonna guess that the anchors on the VerticalLayoutGroup's RectTransform are not correct and on the build, given different screen dimensions, something degenerate is happening to the overall size, causing it to not be able to flow properly.

    Easy enough to prove/disprove: make a custom editor Game resolution that matches what you used in the build and test!

    Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

    Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

    I also use this
    utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.
  3. MelvMay


    Unity Technologies

    May 24, 2013
    Welcome but so you know, the UI is nothing to do with 2D features. Please ask UGUI questions on the dedicated UGUI forum.

    I'll move your thread for you. :)

  4. Linkoma


    Sep 14, 2023
    I have tried many different scales and resolutions. The problem still occurs.

    I don't think the canvas scaling is the culprit. I could be wrong, but it seems to be a parent-child transform inheritance issue. I know that the anchor of the Vertical Layout Group overwrites the anchor of the child objects. Every object in the Vertical Layout Group drifts back to the anchor of the parent object. Changing the anchor of the layout group confirmed this, as all buttons drifted to it no matter where it was. Then, every button in the group reacts whenever any button is selected, so it seems like any change to one child's transform affects the entire group.

    This being the case, what can I do to make sure I am only changing the transform local to each button?