Button draw order inside Vbox or Hbox containers.

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Ram

I am trying to arrange my buttons so that they seem to be on a grid like so : enter image description here

I think the way I would do is use a textboxflat with no background and with a border.
Also we have to set the expand margin to half of the border width so that they overlap their border and make a nice grid. It works well when they all have the same color but if I want to highlight one button by changing the border color, then the buttons block each other because of the drawing order. You can’t use raise() on them either because it also changes their position in the Hbox. Example. I wonder if the only way is to rewrite my own gridContainer or is there a simpler way to achieve the desired effect.

And can’t you just set the z-index of hovered button?

Reloecc | 2020-09-16 17:25

I might be wrong but I think Z index is for sprite and not for Controls. It would be too easy.

Ram | 2020-09-16 18:45

You are right, and I am terrified realizing I’ll need to solve this in my project as well (I have many UI elements with overlaped controls)… I have not prepared hover effects yet. xD

Reloecc | 2020-09-16 19:10

:bust_in_silhouette: Reply From: njamster

Well, by using expand_margin you’re extending the StyleBox beyond the margins of the Control’s rect region which are used by Containers to calculate the space needed for each button. So the obvious fix would be setting the content_margin instead of the expand_margin. Alternatively you can make each Button a child of either:

  • a CanvasLayer-node (which has a layer-property) or
  • any Node2D (because these have a z_index-property)

and increase the layer/z_index of a Button temporarilly on mouse_enter and decrease it back to normal on mouse_exit. It’s a bit hacky, but will work.

I don’t understand your first solution. The intent is to have the buttons share the border as shown in the screenshot. So the borders need to overlap to create the desired effect. I get your second solution, and I have various hacky ones like that. I still think there could be a way to raise the drawing order of controls. I can’t imagine placing every buttons on it’s individual canvas layer.

Ram | 2020-09-21 14:01

The intent is to have the buttons share the border as shown in the screenshot.

I see. Then - unfortunately - you’ll have to use one of the “various hacky” solutions!

I don’t understand your first solution.

Yes, you did, however apparently you cannot imagine it: “I can’t imagine placing every buttons on it’s individual canvas layer.” :wink: I never said it’d be a pretty solution!

I still think there could be a way to raise the drawing order of controls.

So do I! There is a proposal for it, but the issue itself has been around since 2017. So I’m not overly optimistic we’ll get a non-hacky solution anytime soon. :frowning:

njamster | 2020-09-21 20:30