How to separate the interaction between panels?

[kaywoods]

Hi,

I have two panels - one is for the background("Panel A") , the other is for the popup window("Panel B")



Panel A just has the background image which has UITexture image and 2~3 buttons(let's call these buttons as 'New', 'optionButton').

Panel B is the invisible panel at the startup which have several children buttons with the components as 'TweenTransform', 'TweenAlpha',
and turns visible on the press event message of the the 'optionButton' which is the child of Panel A
 

If I press the 'optionButton' , the PanelB is visible and slided  in the center over the Panel A.
It's okay until now..

Now, Panel B covers the center part of thePanelA and their children( 'New', 'optionButton' )

But I also can press the 'New' button, and 'optionButton' , which is the child of PanelA
I think these buttons shouldn't be pressed because the PanelA is under the Panel B,
(that means PanelB covered the PanelA)

How can I solve this??

How to separate the interactions between panels( upper panel and lower panel ) ?

[ArenMook]

You need to position one panel in front of the other on the transform's Z.

[kaywoods]

What a strange thing it is..!!!..

When the poped up panel("Panel B" window) covered the lowered panel("PanelA"),
I can't see the PanelA and their buttons.

But,,,when I press the PanelB's positions which is inferred at the position of Buttons on the PanelA.
The button on the PanelA, which is even invisible because of covered by the PanelB, responds and receives the events ..

I adjusted the position.z value of panelB, But, it didn't work....
(the position.z value of the PanelB : -5, the pos.z value of the PanelA : 0 )

What else did I a false thing???

[ArenMook]

Tilt the scene view camera and examine the position of your colliders. You may need a greater offset than -5 depending on the depths and positions of your widgets.

[electrodruid]

I'm having the same problem. To continue kaywoods' example, my panel B is at -10, well clear of Panel A. This is enough to guarantee that if the buttons on the panels overlap, the Raycast will collide with the Panel B buttons, which is good. The problem that I'm having is that where there are buttons on Panel A, and they're covered over by an area of Panel B which doesn't have any buttons or colliders, the raycast is still going through and letting me click the hidden buttons in Panel A. How can I fix this? Do I need to put a "dummy" collider onto Panel B which doesn't respond to input but blocks the raycasts, or is there some automatic way of doing it that I'm missing?

[Nicki]

Give panel B a catch all collider that covers the whole screen when it is active.
Place this under any button on panel B, but above panel A.
Rejoice in your working buttons.

[electrodruid]

That's what I've ended up doing. It works, and I understand the logic behind it, but it strikes me as a bit unusual that you have to do that. Short of panels being created with their own colliders though, I guess there's no easy way to implement it as an "out of the box" default thing.

[getluky]

Better yet, create a modal semitransparent overlay with a fullscreen UIStretch that grays out the screen behind your active panel, and attach a collider to that. It's a very common UI idiom that also focuses the user on the visible content.