Canvas not filling available space tkinter

Question

I am trying to make a messaging program using tkinter as the gui interface. On the left of the gui, there is a canvas with numbers 1 - 100 in it. There is also a scrollbar on the side of the canvas to scroll through these numbers.

The problem is that the canvas won't fill the all the available space, and for some reason restricts itself to a small box.

Code:

from tkinter import *
# *** Scrollable Frame Class ***

class VerticalScrolledFrame(Frame):

    def __init__(self, parent, *args, **kw):
        Frame.__init__(self, parent, *args, **kw)

        vscrollbar = Scrollbar(self, orient=VERTICAL)
        vscrollbar.pack(fill=Y, side=LEFT, expand=FALSE)
        canvas = Canvas(self, bd=0, highlightthickness=0, yscrollcommand=vscrollbar.set, bg="black")
        canvas.pack(side=LEFT, fill=BOTH, expand=TRUE)
        vscrollbar.config(command=canvas.yview)

        canvas.xview_moveto(0)
        canvas.yview_moveto(0)

        self.interior = interior = Frame(canvas)
        interior_id = canvas.create_window(0, 0, window=interior,
                                           anchor=NW)
        def _on_mousewheel(event):
            canvas.yview_scroll(int(-1 * (event.delta / 120)), "units")
            self.interior.bind_all("<MouseWheel>", _on_mousewheel)
            canvas.bind_all("<MouseWheel>", _on_mousewheel)

        def _configure_interior(event):
            size = (interior.winfo_reqwidth(), interior.winfo_reqheight())
            canvas.config(scrollregion="0 0 %s %s" % size)
            if interior.winfo_reqwidth() != canvas.winfo_width():
                canvas.config(width=interior.winfo_reqwidth())
        interior.bind('<Configure>', _configure_interior)

        def _configure_canvas(event):
            if interior.winfo_reqwidth() != canvas.winfo_width():
                canvas.itemconfigure(interior_id, width=canvas.winfo_width())
        canvas.bind('<Configure>', _configure_canvas)

        # *** Create Window ***
root = Tk()
root.geometry("800x545")
root.config(bg="#23272A")
#root.resizable(False, False)
root.title("Secure Message")

# *** Set Friends Frame ***
friends_frame = VerticalScrolledFrame(root)
friends_frame.pack(side=LEFT)

for i in range(100):
    friend_frames = []
    friend_frame = Frame(friends_frame.interior, width=100)
    friend_frames.append(friend_frame)
    friend_frames[-1].pack()
    text = Label(friend_frame, text=i)
    text.pack(side=LEFT)

chatSpace_frame = Frame(root)
chatSpace_frame.pack(side=RIGHT)

# *** GUI ***
chatSpace = Listbox(chatSpace_frame, bg="#2C2F33", fg="white", width = 65, height=29)
chatSpace.grid(row=0, column=1, sticky=E, padx=10)

user_input = Entry(chatSpace_frame, highlightbackground="#2C2F33", bg="grey", width = 64, fg="white")
user_input.grid(row=1, column=1, sticky=E, pady=10, padx=9)

user_input.focus()

root.mainloop()

I am sorry if it is a bit hard to understand. Any Help would be greatly appreciated!

Screenshots

That canvas with the numbers on the left needs to fill all the empty grey space next to the Chat Space.

You probably just need to add fill/expand options to the `friends_frame.pack(side=LEFT)` line. — jasonharper, Feb 06 '20 at 20:46
The posted code has indentation errors. That being said, I don't think the problem is with the canvas, but rather with the frame the canvas is in. — Bryan Oakley, Feb 06 '20 at 20:49
Read [How to get frame in canvas window to expand to the size of the canvas?](https://stackoverflow.com/questions/29319445) — stovfl, Feb 06 '20 at 21:13
@jasonharper I've already tried that, unfortunately, it did not work. — Neo630, Feb 06 '20 at 22:12
@BryanOakley I Believe that the indentation errors occur because of how I pasted the code into stack overflow, the actual program gives no indentation errors. — Neo630, Feb 06 '20 at 22:17
We have no way of seeing the code on your machine, we can only see what is posted. Please take the time to properly format the code in the question. — Bryan Oakley, Feb 06 '20 at 22:18
@BryanOakley I edited the question and it all should hopefully be correct, sorry for any inconvenience it may have caused. — Neo630, Feb 06 '20 at 22:20
It still won't run. It won't run for trivial reasons (_still_ indentation problems!), but you really should make more of an effort to post code that runs. — Bryan Oakley, Feb 07 '20 at 00:00
@BryanOakley I've spent 10-15 minutes going over the indentation, there does not seem to be a problem. It works fine on my machine. Perhaps it is stackoverflow replacing tabs and spaces? — Neo630, Feb 07 '20 at 00:35
In the posted code, the line `root = Tk()` is inside the class definition. All you have to do is copy and paste the code in your question into a new file and you'll see that it doesn't run. — Bryan Oakley, Feb 07 '20 at 02:46

score 1 · Answer 1 · answered Feb 07 '20 at 00:04

1

Even though you haven't posted code that runs, it seems pretty clear that the problem isn't with the canvas, it's with the frame that it is in.

This is the line with the problem:

friends_frame.pack(side=LEFT)

You aren't having the friends_frame expand, so the canvas inside it can't expand. You need to set expand and/or fill options on the frame.

answered Feb 07 '20 at 00:04

Bryan Oakley

370,779
53
539
685

The `friends_frame` is not what the OP think it is. – stovfl Feb 07 '20 at 09:20
@stovfl: I don't know what you mean by that, and I'm not sure that's important. No matter what they think it is, it's not set to fill the space allotted to it. – Bryan Oakley Feb 07 '20 at 14:20
`friends_frame` is the **parent** of the `Canvas` and `Scrollbar`. Therefor **it is not** the scrollable `Frame`. – stovfl Feb 07 '20 at 14:39
@stovfl: I still don't understand you. They aren't asking about the frame inside the canvas, they are asking why the canvas isn't growing. It's not growing because its parent isn't growing. – Bryan Oakley Feb 07 '20 at 15:16

score 0 · Answer 2 · answered Feb 07 '20 at 13:43

The problem is that the friends_frame is not set to fill both X & Y and expand needs to be set to true.

Example

# *** Set frame for friends view ***
friends_frame = VerticalScrolledFrame(root, bg="#23272A")
friends_frame.pack(side=LEFT, fill=BOTH, expand=TRUE)

Canvas not filling available space tkinter

2 Answers2