Sizer Issue: Widget Mis-aligned

I've gone over this code multiple times and fail to see my error. I'd much
appreciate fresh eyes looking at it.

   The attached screenshot shows the 'old password' widget slightly further
right than the two rows below it. I've been futzing with this for a while
now without fixing the problem. The class is coded this way:

class ChangePasswdDialog(wx.Dialog):
     def __init__(self, *args, **kwds):

         super(ChangePasswdDialog, self).__init__(None)

         header = wx.StaticText(self, wx.ID_ANY, "Change Your Password")

         # Sizers
         topSizer = wx.BoxSizer(wx.VERTICAL)
         oldpwBox = wx.BoxSizer(wx.HORIZONTAL)
         newpwBox1 = wx.BoxSizer(wx.HORIZONTAL)
         newpwBox2 = wx.BoxSizer(wx.HORIZONTAL)
         newpwBox = wx.BoxSizer(wx.VERTICAL)
         btnSizer = wx.StdDialogButtonSizer()

         oldpwLab = wx.StaticText(self, wx.ID_ANY, "Old Password: ")
         self.oldpw = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),
style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|
                              wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)
         oldpwBox.Add(oldpwLab, 0, wx.ALL, 5)
         oldpwBox.Add(self.oldpw, 0, wx.ALL, 5)

         newpw1Lab = wx.StaticText(self, wx.ID_ANY, "New Password: ")
         self.newpw1 = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),
style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|
                              wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)
         newpwBox1.Add(newpw1Lab, 0, wx.ALL, 5)
         newpwBox1.Add(self.newpw1, 0, wx.ALL, 5)

         newpw2Lab = wx.StaticText(self, wx.ID_ANY, "Re-enter New Password:
")
         self.newpw2 = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),
style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|
                              wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)
         newpwBox2.Add(newpw2Lab, 0, wx.ALL, 5)
         newpwBox2.Add(self.newpw2, 0, wx.ALL, 5)

         newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
         newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

         OkBtn = wx.Button(self, wx.ID_OK)
         OkBtn.SetHelpText("The OK button changes your password.")
         OkBtn.SetDefault()

         CancelBtn = wx.Button(self, wx.ID_CANCEL)
         CancelBtn.SetHelpText("The Cancel button exits the process without
changing passwords.")

         btnSizer.AddButton(OkBtn)
         btnSizer.AddButton(CancelBtn)
         btnSizer.Realize()

         topSizer.Add(header, 0, wx.ALIGN_CENTRE|wx.ALL, 5)
         topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
         topSizer.Add(newpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
         topSizer.Add(btnSizer, 0, wx.ALIGN_CENTRE|wx.ALL, 5)

         self.SetSizer(topSizer)
         topSizer.Fit(self)

         # Bindings
         self.Bind(wx.EVT_BUTTON, self.ChangePW, OkBtn)
         self.Bind(wx.EVT_BUTTON, self.Quit, CancelBtn)

         # Methods

     def ChangePW(self, event):
         if self.newpw1.GetValue() == self.newpw2.GetValue():
             wx.MessageBox("Password changed" )
         else:
             wx.MessageBox("New passwords do not match")
             self.Clear()
         # Add validity checking here.
         self.Destroy()

     def Quit(self, event):
         self.Destroy()

# End of class ChangePasswordDialog

   Please point out my positioning error.

TIA,

Rich

screenshot.png

You’re only adding the two middle ‘rows’ to a group:
newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

instead of :

topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

try:

newpwBox.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

(and get rid of):

topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

···

On Friday, July 18, 2014 10:38:43 AM UTC-7, fuzzydoc wrote:

I’ve gone over this code multiple times and fail to see my error. I’d much

appreciate fresh eyes looking at it.

The attached screenshot shows the ‘old password’ widget slightly further

right than the two rows below it. I’ve been futzing with this for a while

now without fixing the problem. The class is coded this way:

class ChangePasswdDialog(wx.Dialog):

 def __init__(self, *args, **kwds):



     super(ChangePasswdDialog, self).__init__(None)



     header = wx.StaticText(self, wx.ID_ANY, "Change Your Password")



     # Sizers

     topSizer = wx.BoxSizer(wx.VERTICAL)

     oldpwBox = wx.BoxSizer(wx.HORIZONTAL)

     newpwBox1 = wx.BoxSizer(wx.HORIZONTAL)

     newpwBox2 = wx.BoxSizer(wx.HORIZONTAL)

     newpwBox = wx.BoxSizer(wx.VERTICAL)

     btnSizer = wx.StdDialogButtonSizer()



     oldpwLab = wx.StaticText(self, wx.ID_ANY, "Old Password: ")

     self.oldpw = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),

style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|

                          wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)

     oldpwBox.Add(oldpwLab, 0, wx.ALL, 5)

     oldpwBox.Add(self.oldpw, 0, wx.ALL, 5)



     newpw1Lab = wx.StaticText(self, wx.ID_ANY, "New Password: ")

     self.newpw1 = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),

style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|

                          wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)

     newpwBox1.Add(newpw1Lab, 0, wx.ALL, 5)

     newpwBox1.Add(self.newpw1, 0, wx.ALL, 5)



     newpw2Lab = wx.StaticText(self, wx.ID_ANY, "Re-enter New Password:

")

     self.newpw2 = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),

style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|

                          wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)

     newpwBox2.Add(newpw2Lab, 0, wx.ALL, 5)

     newpwBox2.Add(self.newpw2, 0, wx.ALL, 5)



     newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

     newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)



     OkBtn = wx.Button(self, wx.ID_OK)

     OkBtn.SetHelpText("The OK button changes your password.")

     OkBtn.SetDefault()



     CancelBtn = wx.Button(self, wx.ID_CANCEL)

     CancelBtn.SetHelpText("The Cancel button exits the process without

changing passwords.")

     btnSizer.AddButton(OkBtn)

     btnSizer.AddButton(CancelBtn)

     btnSizer.Realize()



     topSizer.Add(header, 0, wx.ALIGN_CENTRE|wx.ALL, 5)

     topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

     topSizer.Add(newpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

     topSizer.Add(btnSizer, 0, wx.ALIGN_CENTRE|wx.ALL, 5)



     self.SetSizer(topSizer)

     topSizer.Fit(self)



     # Bindings

     self.Bind(wx.EVT_BUTTON, self.ChangePW, OkBtn)

     self.Bind(wx.EVT_BUTTON, self.Quit, CancelBtn)



     # Methods



 def ChangePW(self, event):

     if self.newpw1.GetValue() == self.newpw2.GetValue():

         wx.MessageBox("Password changed" )

     else:

         wx.MessageBox("New passwords do not match")

         self.Clear()

     # Add validity checking here.

     self.Destroy()



 def Quit(self, event):

     self.Destroy()

End of class ChangePasswordDialog

Please point out my positioning error.

TIA,

Rich

if that doesn’t work, I’d add each column (labels and textctrls) to a their own vertical sizers, then add those two to a single horizontal sizer, then add that to your topsizer.

···

On Friday, July 18, 2014 10:57:53 AM UTC-7, Nathan McCorkle wrote:

You’re only adding the two middle ‘rows’ to a group:
newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

instead of :

topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

try:

newpwBox.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

(and get rid of):

topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

On Friday, July 18, 2014 10:38:43 AM UTC-7, fuzzydoc wrote:

I’ve gone over this code multiple times and fail to see my error. I’d much

appreciate fresh eyes looking at it.

The attached screenshot shows the ‘old password’ widget slightly further

right than the two rows below it. I’ve been futzing with this for a while

now without fixing the problem. The class is coded this way:

class ChangePasswdDialog(wx.Dialog):

 def __init__(self, *args, **kwds):



     super(ChangePasswdDialog, self).__init__(None)



     header = wx.StaticText(self, wx.ID_ANY, "Change Your Password")



     # Sizers

     topSizer = wx.BoxSizer(wx.VERTICAL)

     oldpwBox = wx.BoxSizer(wx.HORIZONTAL)

     newpwBox1 = wx.BoxSizer(wx.HORIZONTAL)

     newpwBox2 = wx.BoxSizer(wx.HORIZONTAL)

     newpwBox = wx.BoxSizer(wx.VERTICAL)

     btnSizer = wx.StdDialogButtonSizer()



     oldpwLab = wx.StaticText(self, wx.ID_ANY, "Old Password: ")

     self.oldpw = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),

style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|

                          wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)

     oldpwBox.Add(oldpwLab, 0, wx.ALL, 5)

     oldpwBox.Add(self.oldpw, 0, wx.ALL, 5)



     newpw1Lab = wx.StaticText(self, wx.ID_ANY, "New Password: ")

     self.newpw1 = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),

style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|

                          wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)

     newpwBox1.Add(newpw1Lab, 0, wx.ALL, 5)

     newpwBox1.Add(self.newpw1, 0, wx.ALL, 5)



     newpw2Lab = wx.StaticText(self, wx.ID_ANY, "Re-enter New Password:

")

     self.newpw2 = wx.TextCtrl(self, wx.ID_ANY, size=(200, 25),

style=wx.TAB_TRAVERSAL|wx.TE_PASSWORD|

                          wx.TE_PROCESS_ENTER| wx.RAISED_BORDER)

     newpwBox2.Add(newpw2Lab, 0, wx.ALL, 5)

     newpwBox2.Add(self.newpw2, 0, wx.ALL, 5)



     newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

     newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)



     OkBtn = wx.Button(self, wx.ID_OK)

     OkBtn.SetHelpText("The OK button changes your password.")

     OkBtn.SetDefault()



     CancelBtn = wx.Button(self, wx.ID_CANCEL)

     CancelBtn.SetHelpText("The Cancel button exits the process without

changing passwords.")

     btnSizer.AddButton(OkBtn)

     btnSizer.AddButton(CancelBtn)

     btnSizer.Realize()



     topSizer.Add(header, 0, wx.ALIGN_CENTRE|wx.ALL, 5)

     topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

     topSizer.Add(newpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

     topSizer.Add(btnSizer, 0, wx.ALIGN_CENTRE|wx.ALL, 5)



     self.SetSizer(topSizer)

     topSizer.Fit(self)



     # Bindings

     self.Bind(wx.EVT_BUTTON, self.ChangePW, OkBtn)

     self.Bind(wx.EVT_BUTTON, self.Quit, CancelBtn)



     # Methods



 def ChangePW(self, event):

     if self.newpw1.GetValue() == self.newpw2.GetValue():

         wx.MessageBox("Password changed" )

     else:

         wx.MessageBox("New passwords do not match")

         self.Clear()

     # Add validity checking here.

     self.Destroy()



 def Quit(self, event):

     self.Destroy()

End of class ChangePasswordDialog

Please point out my positioning error.

TIA,

Rich

Nathan,

   Makes sense and I appreciate the difference.

Thanks,

Rich

···

On Fri, 18 Jul 2014, Nathan McCorkle wrote:

You're only adding the two middle 'rows' to a group:
newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

instead of :
topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

try:
newpwBox.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox1, 0, wx.ALIGN_RIGHT|wx.ALL, 5)
newpwBox.Add(newpwBox2, 0, wx.ALIGN_RIGHT|wx.ALL, 5)

(and get rid of):
topSizer.Add(oldpwBox, 0, wx.ALIGN_RIGHT|wx.ALL, 5)