How to prevent vertical sizers from expanding their children all the way downwards in wxformbuilder

Question

I'm trying to design a dash board in WX form builder for Python. I'm having trouble trying to figure out how to keep two horizontal sizers that are children to a vertical sizer from expanding far apart from each other. Below is a screen shot describing what I am referring to:

The blue arrow represents that I want the textbox control and the label to move up closer to the first label.

My first instinct is that is had something to do with the wx.EXPAND etc flags however, I was not able to change those in a manner that made the sizers come closer to each other. It's almost like every time I place a sizer it automatically tries to fit everything in the entire window...which makes it difficult to place items in precise locations on the form. Any suggestions on how to stop sizers from expanding to the entire frame window size?

My next course of action was to try and use a gridsizer or a flex grid sizer however, I've only used them through direct code, where you can select the exact location in the grid where you want to add a widget or object. With form builder, I'm finding that they are more difficult to use mainly because I can't insert objects at certain indices in the grid sizer. It inserts them sequentially:

1,1 -> 1,2 -> 1,3 -> 1,i -> 2,1 -> 2,2 -> 2,3 -> 2,i -> j,i

Which means that if I need to change something in the grid...Its very difficult. Is there something I'm missing that makes it easier to insert objects into the grid, other than sequentially?

Below is one of example of 5x5 grid sizer (not completely filled) where I have specified both the horizontal and vertical gaps = 0:

Besides being able to replace the button with a textbox at 1,4, I notice that the horizontal gap is clearly not zero even though I specified 0 for vertical and horizontal gaps. This also makes it very hard to design the form. Why is there a horizontal gap between buttons?

score 3 · Accepted Answer · answered Sep 28 '15 at 15:33

As you have noticed "stuff" expands to fit when using sizers and the proportion flag can wreak havoc with your layout if not used properly.
Play with this simple bit of code:

import wx

class Summary(wx.Frame):

    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, "Playing with Simple Sizers", size=(430,260))

        self.panel = wx.Panel(self, wx.ID_ANY)
        self.log = wx.TextCtrl(self.panel, wx.ID_ANY, value="input1:",size=(428,25))
        self.log2 = wx.TextCtrl(self.panel, wx.ID_ANY, value="input2:", size=(428,25))
        self.quit_button = wx.Button(self.panel, label="Quit",size=(60,25))
        self.button1= wx.Button(self.panel, label="1",)
        self.button2 = wx.Button(self.panel, label="2",size=(60,25))
        self.button3 = wx.Button(self.panel, label="3",size=(60,25))
        self.button4 = wx.Button(self.panel, label="4",size=(60,25))
        self.quit_button.Bind(wx.EVT_BUTTON, self.OnQuit)

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        hbox3 = wx.BoxSizer(wx.HORIZONTAL)
        hbox4 = wx.BoxSizer(wx.HORIZONTAL)

        vbox.Add(self.quit_button, 0, wx.ALL|wx.EXPAND, 1)
        hbox1.Add(self.log, 0, wx.ALL|wx.EXPAND, 1)
        hbox2.Add(self.log2, 0, wx.ALL|wx.EXPAND, 1)

        hbox3.Add(self.button1, 1, wx.ALL|wx.EXPAND, 1)
        hbox3.Add(self.button2, 2, wx.ALL|wx.EXPAND, 1)
        hbox4.Add(self.button3, 0, wx.ALL|wx.EXPAND, 1)
        hbox4.Add(self.button4, 1, wx.ALL|wx.EXPAND, 1)

        vbox.Add(hbox1, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)
        vbox.Add(hbox3, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)
        vbox.Add(hbox4, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)
        vbox.Add(hbox2, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)

        self.panel.SetSizer(vbox)
        self.Show()

    def OnQuit(self, event):
        self.Close()
# Run the program
if __name__ == "__main__":
    app = wx.App()
    frame = Summary()
    app.MainLoop()

The proportion flag is the 2nd parameter when adding into the sizer.
You will note that it has been set at 0, 1, and 2 for the buttons, change them and see what happens to the buttons in relation to each other and play with the size parameter of a button.
Change the proportion flag on self.log or self.log2 to 1 and watch that one expand.
Finally make the frame size wider and see the reaction.
Sizers can be extremely frustrating at first but once you "get" it, they are powerful tools.

score 1 · Answer 2 · answered Sep 28 '15 at 01:23

Just make the proportion of the sizer 0 (zero). If proportion is greater than 0, layout engine tries to allocate space according to this value otherwise it makes as minimum as possible, which is what you want. Most of the time I prefer proportion as 0.

I have not used wx.GridSizer but I often use wx.GridBagSizer. You do not have to add your widgets to wx.GridBagSizer sequentially or you do not have to put widgets for each cell, it works as you expect. Add a wx.GridBagSizer to your panel in wxformbuilder and add your widgets to it. You can change the row , column of the widget from the object properties under gbsizeritem and it places accordingly after changing.

Unfortunately you have to update the row and column values if you change a widget's location or add a new one, it is inevitable.

How to prevent vertical sizers from expanding their children all the way downwards in wxformbuilder

2 Answers2