Question

I have a panel containing a button as well as another panel which itself contains a textCtrl. I have a panel just for the textctrl because I am trying to have a custom border color around the textCtrl. Unfortunately I can not get the textCtrl to not fill the entire panel..I suspect it has to do with the SetSizerAndFit but I am not sure. Is it possible to have a custom colored border around the textCtrl ?
Here’s the code:

class MainWindow(wx.Frame):
    def __init__(self,parent,id,title):

        wx.Frame.__init__(self,parent,wx.ID_ANY,title,size=(800,600))

    self.panel=wx.Panel(self,wx.ID_ANY,style=wx.BORDER_SIMPLE)
    self.panelText=wx.Panel(self.panel,wx.ID_ANY,
        size=(450,40),style=wx.BORDER_SIMPLE)

    self.panel.SetBackgroundColour("white")
    self.panelText.SetBackgroundColour("#27bbdc")

    size=self.panelText.GetSize()

    self.sizerControls=wx.BoxSizer(wx.HORIZONTAL)
    self.sizerMain=wx.BoxSizer(wx.VERTICAL)
    #self.sizerText=wx.BoxSizer(wx.HORIZONTAL)

    #-------------Objects------------
    self.text=wx.TextCtrl(self.panelText,-1, style=wx.TE_READONLY|wx.NO_BORDER,
        size=(size[0]-4,size[1]-4),pos=(1,1))
    image=wx.Image("Button_80x80.png",wx.BITMAP_TYPE_ANY).ConvertToBitmap()
    self.buttonFolder=wx.BitmapButton(self.panel,-1,bitmap=image,
        size=(95,95),style=wx.NO_BORDER)        

    #-------------Sizers-------------
    #self.sizerText.Add((0,0),1)
    #self.sizerText.Add(self.text,0,flag=wx.ALIGN_CENTER)
    #self.sizerText.Add((0,0),1)
    self.sizerControls.Add(self.panelText,1,flag=wx.ALIGN_CENTER)
    self.sizerControls.Add(self.buttonFolder,0,flag=wx.ALIGN_CENTER)
    self.sizerMain.Add(self.sizerControls,1,flag=wx.ALIGN_CENTER)

    #-------------Events-------------
    self.Bind(wx.EVT_BUTTON, self.OnButton, self.buttonFolder)

    self.panel.SetSizerAndFit(self.sizerMain)

    self.Show()

Answer 1

Your problem is that the wx.TextCtrl is not centered in the panel. This is because you’re setting the position to (1,1) (i.e. 1 pixel below and to the right of the top left corner)

I ran your code (commenting out the code relating to the wx.BitmapButton since I didn’t have the file). If you increase the panel difference from 4 pixels to 10 pixels you see this:

Notice how all the colour is in the bottom right?

Mike Driscoll already gave you the answer, but you slightly misunderstood. The point of using the wx.All flag and a sizer wasn’t to create a border that you could set the colour on, it was to center your wx.TextCtrl in the panel and let the colour of the panel show through.

Look at this code snippet

self.sizerText=wx.BoxSizer(wx.HORIZONTAL)
self.text=wx.TextCtrl(self.panelText,-1, style=wx.TE_READONLY|wx.NO_BORDER)
#dont' set the size nor the position
self.sizerText.Add(self.text, 1, flag=wx.ALL|wx.EXPAND, border=10)
#make the textCtrl expand in all possible directions but leave a 10 pixel border on all sides
#since the border is on left/right and top/bottom this is equivalent to panel size - 20
self.panelText.SetSizer(self.sizerText)

Which results in a window like this:

As a side note, as I alluded to in my code, setting the the panel size – 4 equates to only a 2 pixel border, which is hard to see. That may have also been part of your problem.