Transparent Button in onGUI

Hi All,

I have a dropdownlist created using buttons.
I based it on [this][1] tutotial.
I used a Texture2D to make the background of the buttons(dropdown items) solid.
The problem is when I hover over Level 3 the button in the back gets selected, when I click Level 3 the button’s click event is envoked.
[57403-buttons.png*_|57403]

Here’s my code:

    void Start()
    {
        SetupStyle()
    }

    void SetupStyle()
    {
        _errStyle = new GUIStyle();
        _errStyle.normal.textColor = Color.red;
        _errStyle.fontStyle = FontStyle.Bold;

        _ddlStyle = new GUIStyle();
        _ddlStyle.normal.background = _dialogBackground;
        _ddlStyle.normal.textColor = new Color(Color.white.r, Color.white.g, Color.white.b, 1);

    }

    void OnGUI()
    {
        ShowDialog();
    }

    void ShowDialog()
    {
        GUI.BeginGroup(new Rect((Screen.width - 400) / 2, (Screen.height - 200) / 2, 400, 200));
        GUI.DrawTexture(new Rect(0, 0, 400, 200), _dialogBackground);

        GUI.Label(new Rect((400 - 200) / 2, (200 - 30) / 4, 250, 30), "Until what level do you want to skip?");
        GUI.Label(new Rect((400 - 100) / 2, 20, 250, 30), _errMsg, _errStyle);

        if (GUI.Button(new Rect((400 - 230) / 2, ((200 - 30) / 2) + 40, 100, 30), "Cancel"))
        {
            _showDialog = false;
        }

        if (GUI.Button(new Rect((400 - 230) / 2 + 130, ((200 - 30) / 2) + 40, 100, 30), "Ok"))
        {
            if (_selectedItem == "Select Level")
            {
                _errMsg = "Please select a level.";
            }
            else
            {
                GetQuestions();
                _showDialog = false;
                Next();
            }
        }

        if (_editing)
        {
            int height = (30 * GameDataModel.WarpEnd);
            ScrollPositon = GUI.BeginScrollView(new Rect((400 - 200) / 2, 200 / 3, 270, 100), ScrollPositon, new Rect(0, 0, 250, height), false, true);
            CreateDDL(0, 0, 250, 30);
            GUI.EndScrollView();
        }
        else
        {
            CreateDDL((400 - 200) / 2, 200 / 3, 250, 30);
        }

        GUI.EndGroup();
    }

    void CreateDDL(float x, float y, float width, float height)
    {
        Rect rect = new Rect(x, y, width, height);
        if (!_editing)
        {
            if (GUI.Button(rect, _selectedItem, _ddlStyle))
            {
                _errMsg = "";
                _editing = true;
            }

        }

        if (_editing)
        {
            for (int i = 0; i < _items.Length; i++)
            {
                if (GUI.Button(new Rect(rect.x, (rect.height * i), rect.width, rect.height), _items*, _ddlStyle))*

{
_errMsg = “”;
_selectedItem = _items*;
editing = false;
_
}*

}
}
}
_[1]: Unity 3D GUI Combo Box Tutorial - YouTube
_

You shouldn’t overlap GUI elements in OnGUI. The old GUI system uses an immediate mode. So the elements are processed in the order they appear in code. That’s why the one that appeared first in code will react first to a click. However the first one in code is also drawn first and therefore at the bottom. So when elements overlap the element that appears last in code will be on top since it’s drawn last.

One solution is to use a GUI.Window. Windows have proper z handling between windows. Windows can change their depth order but are always on top of the normal GUI and will always receive events first.

So you might want to implement your dropdown with a window. Alternatively you can set GUI.enabled to false for the elements in the background so they don’t react to events.