wxPython align widgets and fitting

Question

Actually I have two questions:

1. How to prevent self.Fit() from re sizing the widgets?

Here is the window without .Fit(), I'm quite happy with the width of my TextCtrl, but I want the height of the window to adjust to the widgets.

When I add .Fit(), the width of TextCtrl changes:

With Fit

2. How do I align the two TextCtrl, as you can notice their starting point is different, for that I tried to use a wx.FlexGridSizer, but I had trouble adjusting the spacing between the StaticText and the TextCtrl

Here is the code:

#!/usr/bin/env python
import wx


class loginWindow(wx.Frame):
    def __init__(self, parent, title):
        super(loginWindow, self).__init__(parent, title=title,
                                      style=wx.SYSTEM_MENU |
                                      wx.CAPTION |
                                      wx.CLOSE_BOX)
        self.InitUI()
        self.Center()
        self.Show()

    def InitUI(self):
        self.main_sizer = wx.BoxSizer(wx.VERTICAL)
        #User name
        self.hsizer1 = wx.BoxSizer(wx.HORIZONTAL)
        self.user_name_lbl = wx.StaticText(self, label="User name:")
        self.hsizer1.Add(self.user_name_lbl, flag=wx.EXPAND | wx.RIGHT | wx.ALIGN_CENTER, border=5)
        self.user_name_txt = wx.TextCtrl(self)
        self.hsizer1.Add(self.user_name_txt, flag=wx.EXPAND | wx.LEFT, proportion=3, border=5)
        #Password
        self.hsizer2 = wx.BoxSizer(wx.HORIZONTAL)
        self.password_lbl = wx.StaticText(self, label="Password:")
        self.hsizer2.Add(self.password_lbl, flag=wx.EXPAND | wx.RIGHT | wx.ALIGN_CENTER, border=5)
        self.password_txt = wx.TextCtrl(self)
        self.hsizer2.Add(self.password_txt, flag=wx.EXPAND | wx.LEFT, proportion=3, border=5)
        #Login button
        self.login_button = wx.Button(self, label="Login")
        #Main sizer
        self.main_sizer.Add(self.hsizer1, flag=wx.EXPAND | wx.ALL | wx.ALIGN_CENTER, border=5)
        self.main_sizer.Add(self.hsizer2, flag=wx.EXPAND | wx.ALL | wx.ALIGN_CENTER, border=5)
        self.main_sizer.Add(self.login_button, flag=wx.EXPAND | wx.ALL | wx.ALIGN_CENTER, border=5)
        self.SetSizer(self.main_sizer)
        self.Fit()

if __name__ == '__main__':
    app = wx.App()
    loginWindow(None, title="AppTitle")
    app.MainLoop()

Answer 1

To prevent self.Fit() from re sizing the widgets on the width only

self.SetMinSize((self.WIDTH, -1))

By setting a min width value, but giving a height of -1 will fix the width but leave the height free to be set by self.Fit()

If you want the width fixed to the current window width, use the following:

width, _ = self.GetSize()
self.SetMinSize((width, -1))

To align the two TextCtrl use a flexgrid sizer and give the labels style wx.ALIGN_RIGHT

To make the TextCtrl stretch give them the style wx.EXPAND and set there coloumn position to be able to grow with

FlexGridSizer.AddGrowableCol(col)

I also find that having a frame -> sizer -> panel -> sizer -> controls makes sizers work better.

Here is some complete code

#!/usr/bin/env python
import wx


class loginWindow(wx.Frame):
    def __init__(self, parent, title):
        super(loginWindow, self).__init__(parent, title=title,
            style=wx.SYSTEM_MENU | wx.CAPTION | wx.CLOSE_BOX)
        self.WIDTH = 400
        self.InitUI()
        self.Center()
        self.Show()

    def InitUI(self):

        panel = wx.Panel(self)
        self.user_name_lbl = wx.StaticText(panel, label="User name:")
        self.user_name_txt = wx.TextCtrl(panel)
        self.password_lbl = wx.StaticText(panel, label="Password:")
        self.password_txt = wx.TextCtrl(panel)
        self.login_button = wx.Button(panel, label="Login")

        fg_sizer = wx.FlexGridSizer(cols=2, vgap=5, hgap=5)
        fg_sizer.Add(self.user_name_lbl, 0, wx.ALIGN_RIGHT | wx.ALIGN_BOTTOM)
        fg_sizer.Add(self.user_name_txt, 0, wx.EXPAND)
        fg_sizer.Add(self.password_lbl, 0, wx.ALIGN_RIGHT | wx.ALIGN_BOTTOM)
        fg_sizer.Add(self.password_txt, 0, wx.EXPAND)
        fg_sizer.AddGrowableCol(1)

        panel_sizer = wx.BoxSizer(wx.VERTICAL)
        panel_sizer.Add(fg_sizer, 0, wx.ALL | wx.EXPAND, 5)
        panel_sizer.Add(self.login_button, 0, wx.EXPAND | wx.ALL, 5)
        panel.SetSizer(panel_sizer)

        frame_sizer = wx.BoxSizer(wx.VERTICAL)
        frame_sizer.Add(panel, 1, wx.EXPAND)
        self.SetSizer(frame_sizer)
        self.SetMinSize((self.WIDTH, -1))
        self.Fit()


if __name__ == '__main__':
    app = wx.App()
    loginWindow(None, title="AppTitle")
    app.MainLoop()

Answer 2

make the StaticTexts the same width ... in fact set all the widths, and that will solve all your problems

label_width = 125
text_ctrl_width= 265
...
self.user_name_lbl = wx.StaticText(self, label="User name:",size=(label_width,-1)
self.user_name_txt = wx.TextCtrl(self,size=(text_ctrl_width,-1)
...
self.password_lbl = wx.StaticText(self, label="Password:",size=(label_width,-1))
self.password_txt = wx.TextCtrl(self,size=(text_ctrl_width,-1)
...

of coarse self.fit is going to change the size of any widget that you use the EXPAND style on ... down to its minimal size ... so you need to set that width if you want it to be that width