Search Unity

Question Need help with dropdown UI

Discussion in 'Editor & General Support' started by unity_2612830237F54D9F4790, Feb 25, 2024.

  1. unity_2612830237F54D9F4790

    unity_2612830237F54D9F4790

    Joined:
    Feb 20, 2024
    Posts:
    2
    Hello, I am pretty new to Unity and I have encountered a problem that I apparently need code to fix. What I am trying to do is separate the option buttons. This is what my dropdown list currently looks like:
    Screenshot 2024-02-25 143539.png
    This is what I want the dropdown list to look like:
    upload_2024-2-25_14-38-34.png
    However, I can only achieve the desired format through play mode, since it is the only time where the dropdown list will show up in the hierarchy menu, and since we all know, play mode changes are only temporary. Is there any way I can achieve the desired format through code, or any other way while still working like a normal dropdown UI? I've been stuck on this for a good while and would really appreciate the help.
     
  2. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,726
    You don't need code.

    You need to go into the item template and adjust the anchoring and probably the parenting and then make your own inset button boundary.

    Pay attention to what is connected to the DropDown inspector itself and make sure things are still correct so it can inject the text, clone the template, etc.

    I did it like this, took about 3 or 4 minutes of fiddling. The only thing I added was the green item... see inspector closeup. I cloned the
    ItemBackground
    and moved it to just "under" the
    ItemLabel
    , then renamed it to
    ItemPerimeter


    I highly recommend doing it a few times (do it, delete it, do it again, etc.) on a Dropdown you don't care about until you're a real pro.


    Screen Shot 2024-02-25 at 12.52.36 PM.png Screen Shot 2024-02-25 at 12.52.50 PM.png Screen Shot 2024-02-25 at 12.52.41 PM.png


    Here's more anchoring notes... it's critical that you "get" how the anchoring works otherwise this will be endlessly infuriating to get right. :)

    Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

    https://docs.unity3d.com/2023.1/Documentation/Manual/HOWTO-UIMultiResolution.html

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

    https://forum.unity.com/threads/inc...size-between-two-people.1130146/#post-7261747

    https://forum.unity.com/threads/game-ui-button-size-problem.1142650/#post-7337383
     
    Last edited: Feb 25, 2024
  3. unity_2612830237F54D9F4790

    unity_2612830237F54D9F4790

    Joined:
    Feb 20, 2024
    Posts:
    2
    Thank you Kurt for replying, I'm sorry but I am still having a little bit of trouble trying to understand how to fix the problem.
    upload_2024-2-25_16-39-59.png
    I know that the label, checkmark, and background are all what determine how the dropdown option will show. However, I still do not know how to separate them. I've been thinking if there is a way to separate the options after a certain amount of height or y-coordinates. I just can't seem to figure what settings to change. If you need any screenshots from my set up please don't hesitate to ask for them.