Make a widget fill the remaining space without overlapping other in Gtk.Overlay container

Platform
1

Hello. I’m using Gtk.Overlay to place multiple widgets like buttons and other sub containers. I’ve placed buttons on the two ends of the window, centered vertically. Now I want the middle space to get filled by a sub-container which is a stack. However usign Align::FILL causes the stack to fill the entire overlay ignoring the button widgets.

Is there anyway to make the stack fill the remaining space without overlapping on the buttons apart from manually subtracting the button sizes and setting the minium size through set_size_request on the stack?

A picture of what’s happening currently. I’ve made the stack to be grayish and transparent to better visualize the issue.

image
image841×1086 43 KB

I want the stack container to fill without overlapping on the 2 buttons

EDIT:- The widget hierarchy is like this for now
Main Window -> Overlay Container -> Buttons, Stack

Reason why I picked Overlay over box is I need to place more widgets like a menu bar, options icon which are almost always on the corner, or centered. Thus the overlay felt pretty handy for this option as it allows the overlay widgets to be positioned based on the alignment.

2

Don’t use overlay. The whole purpose of an overlay is to have some widgets overlayed on top of another. What you want can be achieved by a CenterBox.

3

Hmm, the centerbox looks nice but I want to add other stuff like a Menubar at the very top, perhaps a tool/options icon on one of the corners as well. The centerbox wouldn’t work for that afaik.

I thought overlay was used to overlay widgets on top of a single main child not on other child overlay widgets as well. So it has no mechanism for filling up the remaining space?

4

The function of the overlay is to overlay objects on a child, as you put it, but overlay assumes that you have something important underneath. Placing a menu or options bar can be achieved without using an overlay.

You only need the overlay if you want to make these bars appear/disappear over the current content without changing the widget distribution of the overlaying content.

If you just want them to stay fixed, there’s no need to use overlay. In your case, a Gtk.Box will already place a button on each side with the stack in the center.

The way your image appears, it looks like you added the buttons and then added the overlay with the stack over the widget that contains the buttons. Since, to achieve the behavior you want, the overlay should contain both the buttons and the stack. As the overlay can only contain one child, the stack and the buttons would probably be inside a Gtk.Box that would be the child of the overlay.

1 Like
5

The way your image appears, it looks like you added the buttons and then added the overlay with the stack over the widget that contains the buttons. Since, to achieve the behavior you want, the overlay should contain both the buttons and the stack. As the overlay can only contain one child, the stack and the buttons would probably be inside a Gtk.Box that would be the child of the overlay.

Aah, I think this clicked something. Basically I was adding the buttons and stack as overlays and thought the overlay container keeps track of widgets added through add_overlay as it’s children so the stack should know about the buttons when it actually doesn’t I guess. Overlay widgets are just that, overlays. They don’t know anything about other overlay widgets added in the overlay container.

I managed to circumvent the issue by adding a centerbox as an overlay widget through add_overlay. So now I can still use the overlay container, add a center box for the main UI and then still add the menu bars and tool icons as overlay widgets on top of the center box.

6

If you don’t need one widget to be above another, you don’t need GtkOverlay at all. If I understand correctly, what you are trying to acheive can be acheived with two boxes as below.

Gtk.Box {
  orientation: vertical;

  Menubar {}

  Gtk.Box {
    orientation: horizontal;

    Gtk.Button { halign: start; }
    Gtk.Stack { halign: fill; }
    Gtk.Button { halign: end; }
  }
}
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.