Tkinter Canvas does not fill its Frame parent properly (Python)

Question

I am trying to make a tkinter app with a smaller side menù on the left, this is how it should look like:

from tkinter import *

root = Tk()
root.geometry("700x500")

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

left_frame = Frame(root, background = "red")
left_frame.grid_rowconfigure(0, weight = 1)
left_frame.grid_columnconfigure(0, weight = 1)
left_frame.grid(row = 0, column  = 0, sticky = "news")

right_frame = Frame(root, background = "blue")
right_frame.grid(row = 0, column = 1, sticky = "news")

root.mainloop()

The problem is, if I try to put a canvas inside the red frame, this happens:

from tkinter import *

root = Tk()
root.geometry("700x500")

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

left_frame = Frame(root, background = "red")
left_frame.grid_rowconfigure(0, weight = 1)
left_frame.grid_columnconfigure(0, weight = 1)
left_frame.grid(row = 0, column  = 0, sticky = "news")

right_frame = Frame(root, background = "blue")
right_frame.grid(row = 0, column = 1, sticky = "news")

c = Canvas(left_frame, borderwidth=0, background = "yellow", highlightthickness=0)
c.grid(row = 0, column = 0, sticky = "news")

root.mainloop()

I was expecting the yellow canvas to fill the red frame without changing its size, where did I go wrong? Thank you.

Try defining your canvas with a width = 0. It seems to work?? — Derek, Oct 18 '22 at 02:39

Faraaz Kurawle · Answer 1 · 2023-03-11T16:06:52.957

0

This effect is due to wrong usage of sticky option.

Extracted form this website

What is the use of sticky in Python tkinter?

When the widget is smaller than the cell, sticky is used to indicate which sides and corners of the cell the widget sticks to. The direction is defined by compass directions: N, E, S, W, NE, NW, SE, and SW and zero.

so sticky defines on which point the cell has to stick, which in your case have difined as news that means all four side.

So to get required out put you can use nwsw.

edited Mar 11 '23 at 16:06

answered Mar 11 '23 at 15:53

Faraaz Kurawle

1,085
6
24

Should be nwse not nwsw. – toyota Supra Mar 11 '23 at 16:07
@toyotaSupra , the Questioner wants to stick it from left, so it would be `nwsw` – Faraaz Kurawle Mar 11 '23 at 16:09

score 0 · Answer 2 · answered Mar 11 '23 at 17:40

You need to set uniform option of root.grid_columnconfigure(...) so that left_frame always get one-third of the parent width:

root.grid_columnconfigure(0, weight = 1, uniform=1)
root.grid_columnconfigure(1, weight = 2, uniform=1)

Or you can use .place() on the left and right frames:

left_frame.place(x=0, y=0, relwidth=0.33, relheight=1)  # 1/3 of parent width
right_frame.place(relx=0.33, y=0, relwidth=0.67, relheight=1) # 2/3 of parent width

Tkinter Canvas does not fill its Frame parent properly (Python)

2 Answers2