A simple scrollable frame class for tkinter, including example usage.

Thanks! Great work! Saves me so much time.

Just want to point out that the frame in the canvas in your script doesn't stretch to fill the canvas. I stumbled on the solution here: https://stackoverflow.com/questions/29319445/tkinter-how-to-get-frame-in-canvas-window-to-expand-to-the-size-of-the-canvas

Author

Thanks for providing the link to the solution oddsun!

The corrected code, without the example, is in the link, just copy and paste:
https://paste.ofcode.org/CxR5Jdxrxw4iqb8VtNDcgb

Author

@MateusVDT the link to your code is broken. I have added the extra code to make the internal canvas stretch when the frame is resized.

why don't you create it as a package after documenting it ?
it seems to be a very useful tool

This works very well. However, it seems that scrolling with the mouse wheel does not work. Is this a problem on my side or do other people have the same?

Author

I'm having a couple of problems placing this into a toplevel window.
any suggestions on how to adapt this?

Author

It should just work. If you copy the gist into a file and run it directly with python, the demo is in a top level window.

ah yeah, im dumb thanks. this was a huge help

I'm try to put a scrollable frame into my root window, where I will then place all of my other widgets and things. I essentially want the whole window to be scrollable. When I try to do this, it only ends up showing the top left corner of the contents of .viewPort. Any ideas as to what the issue might be?
`mainWindow=Tk()
mainWindow.title("Diamond Database Analysis Application")
innerMain=ScrollFrame(mainWindow)
loadDatabase = Button(innerMain.viewPort, text="load database", command=getDatabase)
loadDatabase.grid(column=0, row=0)
databasePath=Label(innerMain.viewPort, text="Select an excel file")
databasePath.grid(column=1, row=0)

innerMain.pack(side="top", fill="both", expand=True)`

is a brief snippet of my code

Author

It looks like you are trying to load dynamic content into the scrollframe. Have you tried resizing the window after the dynamic content is loaded to see if the scrollbars pick it up?

Thanks. I really did just have to resize the window. Feeling pretty stupid right now. But is there any way to make it so that the window is already expanded so that the user won't need to drag out the sides every time they use it?

never mind I figured it out. Thanks for posting this its really helpful!

thanks brother really appreciate, i used your code in my college project

I wanted to you both vertical and horizontal scrollbar . Its showing me scrollbar but not working

class ScrollFrame(tk.Frame):
def init(self):
super().init() # create a frame (self)

    self.canvas = tk.Canvas(self, borderwidth=0, background="#000000")          #place canvas on self
    self.viewPort = tk.Frame(self.canvas, background="#000000")                    #place a frame on the canvas, this frame will hold the child widgets
    self.vsb = tk.Scrollbar(self, orient="vertical", command=self.canvas.yview) #place a scrollbar on self
    self.hsb = tk.Scrollbar(self, orient=HORIZONTAL, command=self.canvas.xview)  # place a scrollbar on self
    self.canvas.configure(yscrollcommand=self.vsb.set,xscrollcommand=self.hsb.set)                          #attach scrollbar action to scroll of canvas
    #self.canvas.configure(xscrollcommand=self.hsb.set)
    self.vsb.pack(side="right", fill="y")                                       #pack scrollbar to right of self
    self.hsb.pack(side="bottom", fill=X)
    self.canvas.pack(side="right", fill="both", expand=True)                     #pack canvas to left of self and expand to fil
    self.canvas_window = self.canvas.create_window((0,0), window=self.viewPort, anchor="nw",            #add view port frame to canvas
                              tags="self.viewPort")

    self.viewPort.bind("<Configure>", self.onFrameConfigure)                       #bind an event whenever the size of the viewPort frame changes.
    self.canvas.bind("<Configure>", self.onCanvasConfigure)                       #bind an event whenever the size of the viewPort frame changes.

    self.onFrameConfigure(None)                                                 #perform an initial stretch on render, otherwise the scroll region has a tiny border until the first resize

def onFrameConfigure(self, event):
    '''Reset the scroll region to encompass the inner frame'''
    self.canvas.configure(scrollregion=self.canvas.bbox("all"))                 #whenever the size of the frame changes, alter the scroll region respectively.

def onCanvasConfigure(self, event):
    '''Reset the canvas window to encompass inner frame when required'''
    canvas_width = event.width
    self.canvas.itemconfig(self.canvas_window, width = canvas_width)            #whenever the size of the canvas chang

Thanks for the code:
One issue:

If i use another style from scrolbar two windows are opened:

from tkinter import ttk

style = ttk.Style()
style.theme_use('clam')

...
self.vsb = ttk.Scrollbar(self, orient="vertical", command=self.canvas.yview) #place a scrollbar on self 

What's wrong with that?

Hi, could you please help me with the frame in the canvas doesn't stretch to fill the canvas

Hi all,

First of all, thanks a lot for this really usefull scrollable frame class ! It helped me a lot and was for me the only working scrollable frame !!

But unfortunatelly I can't manage to use the scroll with the mouse-wheel even if my mouse pointer is on the bar... Is there a way to make it work ? It sends me this message in the console when I tried :

File "D:\Anaconda\lib\tkinter\__init__.py", line 1739, in yview res = self.tk.call(self._w, 'yview', *args) _tkinter.TclError: unknown option "": must be moveto or scroll

Author

@JeanBaptisteMelmi thanks for posting the solution. I have made it cross platform and added it to the gist so the above code should now support scrollwheel on all platforms.

never mind I figured it out. Thanks for posting this its really helpful!

Can you please tell me how you did it? Well, I couldn't

@oddsun thanks for finding the solution, however I can't seem to figure out how to use that solution in the original code. Could you explain how to use the solution to make the Scrollable Frame expand?

This is a wonderful solution for a scrollable frame. Thanks.

Thanks for this, what license is it under?

I too would like to know about the license. Are you OK with GPL 3+ distribution?

Author

Sure, GPL 3+ is fine. Everything I write somehow relies on the work of others, so share and share alike. Credit to python and tkinter developers for their hard work on the language and toolkit. -- Source has been updated.

thanks you are a life saver, would have taken me ages to figure this out from scratch.