tkinter frames grid issue

Question

I am very new to python (just trying do something with the new pie3 they gave me at work) and have mostly just been watching youtube videos on how it works. But I am having problems with the grid layout as soon as I moved to doing something in full screen. In the following code:

from tkinter import *
root = Tk()

root.attributes('-fullscreen', True)
root.configure(background='grey')

wind_frame = Frame(root, bg="grey")
qnh_frame = Frame(root, bg="grey")
wind_frame.grid(row=0)
qnh_frame.grid(row=0, column=1)

label_wind = Label(wind_frame, text="WIND", font=("Arial", 80), bg="grey")
label_wind.grid(row=0, column=0, padx=(100,600))

label_qnh = Label(qnh_frame, text="QNH", font=("Arial", 80), bg="grey")
label_qnh_hpa = Label(qnh_frame, text="10000", font=("Arial", 50), bg="grey")
label_qnh_temp = Label(qnh_frame, text="30C", font=("arial", 50), bg="grey")

label_qnh.grid(row=0, column=1, sticky=W)
label_qnh_hpa.grid(row=6, column=1, sticky=W)
label_qnh_temp.grid(row=10, column=1, sticky=W)

root.mainloop()

The WIND title is getting pushed down multiple rows. Am I doing something wrong? I thought creating two frames would make the contents within each frame formatting independent of each other.

Answer 1

You are correct that using two frames means you can lay out the widgets in each frame independently.

When using grid, items will be centered in the space that is given to them. Since the qnh frame is taller than the wnd frame there is extra space in the cell. An easy way to visualize this when developing is to give each frame a distinctive color. By doing so, it's much easier to see if it is a frame that is moving, or the contents of the frame. Once you get everything working and resizing properly, you can reset the colors since they don't affect layout.

In this case you'll see it's not the title that is moving down, but the entire frame. The row is too tall for the contents in column one so there are gaps above and below the frame. Typically you'll want frames to "stick" to all edges of the space given to it so there are no gaps. For example:

wind_frame = Frame(..., background="pink") 
wind_frame.grid(row=0, sticky="nsew")

That solves the immediate problem, but you'll have other problems as you write more code. By default, each row and each column has a weight of zero, meaning that if there is any extra space, it will go unused. As a general rule of thumb, when you use grid to place widgets in a parent widget, you must always call grid_columnconfigure and grid_rowconfigure on the parent for at least one row and one column, and give that row and column a positive weight. This will tell tkinter "give any extra space to this row (or column)".

In your example code, you should do this on root (since you put frames in the root), and on each of the two main frames (since you put widgets in the frames).

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
...

With grid, you can use rowconfigure and columnconfigure on empty rows and columns. For example, if you wanted any extra space to appear at the bottom of your GUI you could figure the row after the last row to have a positive weight, and all extra space will appear there rather than given to the other widgets.