CODEWITHSUNDEEP
pythontkinterscrollbar
user2631279
user2631279

Reputation: 127

How to resize a scrollable frame to fill the canvas?

The frame that i want to be scrollable is on the left side. I want to expand it to "fill both". 

import tkinter as tk
from tkinter import *

class Example(tk.Frame):
    def __init__(self, root):

        tk.Frame.__init__(self, root)
        self.canvas = tk.Canvas(root, borderwidth=0, background="#d3d3d3")
        self.frame = tk.Frame(self.canvas, background="#ffffff")
        self.vsb = tk.Scrollbar(root, orient="vertical", command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.vsb.set)

        self.vsb.pack(side="right", fill="y")
        self.canvas.pack(side="left", fill="both", expand=True)
        self.canvas.create_window((4,4), window=self.frame, anchor="nw", 
                                  tags="self.frame")
        self.frame.bind("<Configure>", self.onFrameConfigure)
        self.pop()

    def pop(self):
        for i in range(100):
            self.f = Label(self.frame, text=i,background="#ffffff", anchor="center")
            self.f.pack(side="top", fill="both")

    def onFrameConfigure(self, event):
        '''Reset the scroll region to encompass the inner frame'''
        self.canvas.configure(scrollregion=self.canvas.bbox("all"))


if __name__ == "__main__":
    root=tk.Tk()
    root.geometry("800x500")
    Example(root).pack(side="top", fill="both", expand=True)
    root.mainloop()

When i pack said frame using self.frame.pack(), it centers and expands, but it becomes un-scrollable.

How do i properly pack this frame and use it for scrolling. Thanks.

Upvotes: 2

Views: 1925

Answers (1)

Bryan Oakley
Bryan Oakley

Reputation: 386255

The normal way to do this is to bind the <Configure> event of the canvas to a function that resizes the frame to fit the canvas.

class Example(tk.Frame):
    def __init__(self, root):
        ...
        self.canvas.bind("<Configure>", self.onCanvasConfigure)
        ...

    def onCanvasConfigure(self, event):
        # width is tweaked to account for window borders
        width = event.width - 4
        self.canvas.itemconfigure("self.frame", width=width)
    ...

Upvotes: 4

Related Questions