Why doesn't my tkinter frame fill the entire window

Question

I am trying to create a quiz game but cannot get the labels to be in the right place, I want 'Maths Category' to be in the top left, but when I select the row and column 0 it puts it in the middle? help....................................................................................................................................

import tkinter
import tkinter as tk
from tkinter.ttk import *
from tkinter import *




score = 0
class SampleApp(tk.Tk):
    def __init__(self):
        tk.Tk.__init__(self)
        self._frame = None
        self.switch_frame(MainMenu)

    def switch_frame(self, frame_class):
        new_frame = frame_class(self)
        if self._frame is not None:
            self._frame.destroy()
        self._frame = new_frame
        self._frame.pack()


class MainMenu(tk.Frame):
    def __init__(self, master):
        #Maths Picture/Button
        global photo
        tk.Frame.__init__(self, master)
        #configure = tk.Frame(self)
        #configure.grid_rowconfigure(0, weight=1)
        #configure.grid_columnconfigure(0, weight=1)
        photo = PhotoImage(file = "MathsPicture.png")
        photoimage = photo.subsample(3,3)
        lbl = tk.Label(self, text="MainMenu", font=('Verdana', 40, "bold"))
        lbl.grid(row=0, column=1)
        button = tk.Button(self, image = photo, command=lambda:[master.switch_frame(PageOne), ScoreUpdate()])
        button.grid(row=1, column=1)
        #tk.Button(self, text="Go to page two",command=lambda:[master.switch_frame(PageTwo), ScoreUpdate()]).pack()
        
def ScoreUpdate(event=None):
    global score
    score += 500

class PageOne(tk.Frame):
    global score
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Frame.configure(self,bg='red')
        #tk.Frame.configure
        tk.Frame.grid_propagate(self)
        lbl = tk.Label(self, text="Maths Category", font=("Verdana", 20))
        lbl.grid(row=0, column = 0)
        lbl = tk.Label(self, text=score , font=("Verdana", 40, "bold"))
        lbl.grid(row=1, column=0)
        lbl = tk.Label(self, text="Question 1", font=('Helvetica', 18, "bold"))
        lbl.grid(row=1, column=3)
        btn = tk.Button(self, text="Go back to MainMenu", font=('Helvetica', 20), command=lambda: master.switch_frame(MainMenu))
        btn.grid(row=0, column=4)
        btn = tk.Button(self, text='Update score', command=ScoreUpdate)
        btn.grid(row=3, column=4)
        btn = tk.Button(self, text="Go to page two",command=lambda:[master.switch_frame(PageTwo), ScoreUpdate()])
        btn.grid(row=4,column=3)
        print("Physics Question 1")

class PageTwo(tk.Frame):
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Frame.configure(self,bg='red')
        tk.Label(self, text="Question 2", font=('Helvetica', 18, "bold")).pack(side="top", fill="x", pady=5)
        tk.Button(self, text="Go back to start page",command=lambda: master.switch_frame(PageThree)).pack()
        tk.Button(self, text='Update score', command=ScoreUpdate)
        print("Physics Question 2")

class PageThree(tk.Frame):
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Frame.configure(self,bg='red')
        tk.Label(self, text="Question 3", font=('Helvetica', 18, "bold")).pack(side="top", fill="x", pady=5)
        tk.Button(self, text="Go back to start page",command=lambda: master.switch_frame(MainMenu)).pack()
        tk.Button(self, text='Update score', command=ScoreUpdate)
        print("Physics Question 3")



if __name__ == "__main__":
    window = SampleApp()
    window.geometry("1200x900")

    window.mainloop()

Try adding `sticky='nw'` in the `grid(...)` for that label. BTW, using same variable for all the labels and same variable for all the buttons is not a good practice. — acw1668, Oct 29 '20 at 01:04
The title of the question does not match with the issue stated in the question. — acw1668, Oct 29 '20 at 02:00
You may interested in https://stackoverflow.com/a/63536506/13629335 — Thingamabobs, Oct 29 '20 at 16:50

figbeam · Accepted Answer · 2020-10-29T17:21:58.303

Grid should put the lbl.grid(row=0, column=0) in the top left corner. It looks to me as if the PageOne object is centered on the window.

Try giving PageOne a background color to see how big it is and where its positioned. My guess is that the containing widget is centered in the window or that the containing frame (or window) is configured to expand (with columnconfigure).

Update

PageOne is packed into the root window (SampleApp) and by default pack will position it in the top middle. You can change this by specifying where you want it.

def switch_frame(self, frame_class):
    new_frame = frame_class(self)
    if self._frame is not None:
        self._frame.destroy()
    self._frame = new_frame
    self._frame.pack(expand=True, anchor='nw')  # New pack details

By setting the space assigned to the widget to expand it will try to get as much space as possible, and then I position the widget in the top right corner with anchor='nw' (as in north-west).

But this places all frames in the upper left corner. If you want this for only the PageOne widget you can adjust pack details there.

class PageOne(tk.Frame):
    global score
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Frame.configure(self,bg='red')
        self.pack(expand=True, anchor='nw') # New pack details
        # etc, etc.

So did the background color thing, and they are centered in the middle, How do I change this? — WilliamG, Oct 29 '20 at 00:27
top-left, not top-right. row 0, column 0 is the upper left corner of the containing widget. — Bryan Oakley, Oct 29 '20 at 04:33
@Bryan Oakley: Apparently wasn't thinking. Thank you for the correction. — figbeam, Oct 29 '20 at 10:15
Somwhere you are creating a widget that contains the PageOne'. It's difficult to say what's the matter without examining that code. Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — figbeam, Oct 29 '20 at 10:18

score 0 · Answer 2 · answered Oct 29 '20 at 04:36

By default, a widget is centered in the space allocated to it. If you want a widget to stick to the top of the space rather than be in the middle, use the sticky attribute.

For example, the following will force the label to be at the upper-left (northwest) corner of the cell allocated to it.

lbl.grid(row=0, column = 0, sticky="nw")

Why doesn't my tkinter frame fill the entire window

2 Answers2