Using Grid and Pack with Frames Tkinter

Question

Is it possible to use grid in a frame and then pack in the root window? For example:

from Tkinter import *
import ttk as ttk
root = Tk()
text = Text(root)

buttonsFrame = Frame(root)
start = Button(buttonsFrame)
start["text"] = "Start"
start.grid(row = 0, column=1)
stop = Button(buttonsFrame, )
stop["text"] = "Stop"
stop.grid(row = 0, column=3)
buttonsFrame.pack(side=TOP)

tabbedPane = ttk.Notebook(root)

raw =  ttk.Frame(tabbedPane)
interpreted =  ttk.Frame(tabbedPane)
text = Text(raw)
text.pack(fill=BOTH, expand=1, side=TOP)

textInterpreted = Text(interpreted)
textInterpreted.pack(fill=BOTH, expand=1, side=TOP)

tabbedPane.add(raw, text="RAW")
tabbedPane.add(interpreted, text="Application")
tabbedPane.pack(fill=BOTH, expand=1, side=TOP)
checkBoxesFrame = Frame(root)
stkCheck = Checkbutton(checkBoxesFrame, text="STK/CAT")
stkCheck.pack(side=LEFT)
stkFile = Checkbutton(checkBoxesFrame, text="File IO")
stkFile.pack(side=LEFT)
stkAuth = Checkbutton(checkBoxesFrame, text="Auth")
stkAuth.pack(side=LEFT)
checkBoxesFrame.pack()

root.mainloop()

As I want spacing between the between the buttons hence why its using different columns. Is it possible to do this?

Answer 1

Yes, it is possible. In fact, it's the recommended way to build complex GUIs.

I think what you are misunderstanding is this: each widget that has children managed by grid has its own "grid". This grid isn't guaranteed to line up with any other grid that might be used in the app. There is no universal set of columns or rows. It's quite possible that column 1 in frame A could be to the right of column 10 in frame B, and row 1 in frame A could be below row 1 in frame B.

In your specific case you are packing the button frame at the top, but because you didn't specify any options it will not fill the width of the parent window. It will attempt to be as small as possible, and in the top-middle section of its parent.

When you put two widgets in there, the frame expands just big enough to contain those widgets. Column 0 of that frame will have zero width since it is empty, column 1 will have the width of the start button, column 2 will have zero width because it is empty, and column 3 will have the width of the stop button. If you want space between them, a simple solution is to force column 2 to be a specific size (eg: buttonsFrame.grid_columnconfigure(2, minsize=100);)

When you are trying to solve layout problems, it really helps to give some of your widgets distinctive background colors so they stand out. For example, if you give buttonsFrame a pink background you'll quickly see that it doesn't fill the whole width of the window.