Creating Dropdown Menus with Grid Layout

[ozanalp]

Hi.
I have been trying to create a menu system by using grid layout. I combined two approachs to create what i desire.

As you can see here I have nested Game Objects. I tried to be pretty specific about which game object perform which task. I will try to give brief eplanation about the components on them;

Scroll Rect: has Scroll Rect.
Mask: has Mask and Image.
Grid: has Image, Content Size Filter and Grid Layou Group.
Collapsable Window: has Content Size Filter.
Window Content: has Vertical Layout Group and Content Szie Filter.
Header: has Image and Layout Element, also a Text and 2 Buttons attached.
Body: has Content Size Filter, Vertical Layour Group and Image, also couple of Buttons, Texts, Toggle, Slider, whatever you may want to add.
Footer: has Image and Layout Element, also has a Text.

The idea is that when you press on the down arrow our dropdown menu gets in the scene, whcih is the Body. The problem is, as you may notice, the menu can’t hide what is left beneath. For example, you pressed on the arrow which is located in the menu 14th. It drops down on menu 17th and 20th. But they kind of mask the menu itself, as well as you can also press on their arrows and they will also drop their menus down.

I want to put the Body above whatever it come across. Think like, you entered a game’s visual setup menu and you clicked on the resolution button. A menu drops down and also you can’t see what is left beneath it until you close the resolution menu.

I tried to seek answer on discord and google but i couldn’t manage to receive a response. There are a lot of different things about creating menus on google but not like this one.
I will be utterly greatful if you can help me.

[Zafaron]

The Unity standard dropdown component seems to create a blocker item that it seens to place behind the window in order to block input to the controls while its window is expanded. Also the window that folds out has its own Canvas component with a sort order set to a very high number to draw it in front of other objects.

Dropdown Component:

Blocker Component:

Might be helpful to create a standard dropdown component and take a close look to see how it accomplishes it.

[Zafaron]

I guess the dropdown component itself is blocking access to the other controls. The blocker component is just preventing you from seeing what’s behind. Anyway, hope this helps.

[ozanalp]

I will definitely try this out. Basically what you say is no need to discover the new world all over again i guess.

I will update this topic after i finish, just don’t expect it be soon since i am pretty noob.

[ozanalp]

Ok. Updating now.

First of all thanks for your reply, that was what i was looking for.

Just adding the blocker component to my approach solved every bit of problem. And, builtin dropdown element can be applied to the grid layout also. Whichever the dev wants.

[Zafaron]

Glad it helped I had just been working with a dropdown in my own project a few minutes before I saw your post.

[ozanalp]

Hehe yes =)

Probably you already know, the blocker components can be applied to any parent and child objects. And the grid layout system plus builtin dropdown objects work incredibly fine together.

[ozanalp]

Hi again.

Sorry to bother you such frequently.

While running test step by step I came across a problem which when I try to drop down the bottom cells they get out of the masked area and unreachable. The builtin dropdown object has auto-direction about these matters. However, i could not manage to combine them. If you know how to do it, would you be so kind to share me the knowledge?

And here are the inspector looks according to the game objects

[Zafaron]

You might try disabling the Content Size Fitter and/or Vertical Layout Group and see if that helps. It’s probably safest to disable them while the game is running because it can mess up your layout in such a way that undo won’t get it back to the way it was. I’ve had to use source control to fix a messed up layout a few times already.

Edit: Just for the components that aren’t showing at the bottom, you shouldn’t have to do that for all of them I don’t think.

[ozanalp]

I followed this tutorial to create my menu system. Then i have spent 6 days on, still counting. You came across duing the strugle. I tried to completely remove the components, might still try couple of tricks on the way. Still not working as i desire.

[Zafaron]

I spent the better part of a day getting a default Unity dropdown (well, text mesh pro dropdown actually) to look the way I wanted it to. Looking at all of those dropdowns you have makes me start to twitch a little I hope you are able to get it working as you like. The reason I had suggested removing the auto size component was because the height of your Window Content was auto set to 0 in one of the screen shots. I’m not sure if that was while it was supposed to be collapsed or if the auto sizer had reduced it to try to keep it fitting in the allowed space.

Or was it supposed to expand upwards since it was near the bottom of the screen?

Edit:

After taking another look at your question (and after having a lot more caffeine), I realized I didn’t understand what you were asking the first time around.

To get the dropdown to expand upwards like the default Unity drop downs do when they are near the bottom edge of the screen, you would have to do some bounds testing to check if your recently opened windows contained any points outside of the screen view. Something like…

        void TestScreenBounds()
        {

            float x = whateverYourOpeningWindowObjectIs.gameObject.GetComponent<RectTransform>().rect.x;

            float y = whateverYourOpeningWindowObjectIs.gameObject.GetComponent<RectTransform>().rect.yMax;


            Vector3 testPoint = Camera.main.WorldToViewportPoint(new Vector3(x, y, 0));

            if (testPoint.y < 0)
            {
                whateverYourOpeningWindowObjectIs.OpenUpwardsInstead()
            }
        }