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.

Answer 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.

Answer 2

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)