How to Create Scrollable Frames with Python Tkinter?

Recently in a webinar, Someone asked me how to create scrollable frames with Python Tkinter. Then I explored more about this topic and I will share my findings with suitable examples and screenshots of executed example code.

Create Scrollable Frames with Python Tkinter

To create a scrollable frame in Tkinter, you can combine a Canvas widget with a Scrollbar. The Canvas serves as a container for the frame, and Scrollbar is attached to the canvas to allow scrolling. This setup enables smooth navigation within a frame when the content exceeds the available space. Below is a step-by-step guide on how to implement this functionality.

Read Python Tkinter Grid

1. Scrollbar

A Scrollbar in Python Tkinter is a widget in which continuous text, pictures, or any other multimedia content can be scrolled in a predetermined direction (Horizontal or Vertical) on the computer window screen.

• When the content exceeds the screen orientation, in that case, scrollbars are added so that the user can navigate to unseen content either in the right-left or upward-downward direction.
• In Python Tkinter widgets are positioned using layout managers like Place(), Grid(), and Pack(). We can use these layout managers to position the scrollbar widget on the application window.

from tkinter import *

ws = Tk()
ws.title("Scrollbar Example")

# Create a Text widget
text_widget = Text(ws, height=10, width=50)
text_widget.pack(side=LEFT, fill=BOTH, expand=True)

# Create a scrollbar
sb = Scrollbar(ws, orient=VERTICAL, command=text_widget.yview)
sb.pack(side=RIGHT, fill=Y)

# Bind scrollbar with the Text widget
text_widget.config(yscrollcommand=sb.set)

# Insert some sample text
text_widget.insert(END, "PythonGuides.\n" * 20)

ws.mainloop()

I have executed the above example code and added the screenshot below.

The picture shows the Vertical scrollbar.

Check out Python Tkinter OptionMenu

2. Scrollbar Grid

Grid in Python Tkinter is a layout manager that organizes the widgets in a row and column format. Everything on the x-axis is the rows and everything on the y-axis is columns.

• In this section, we will learn how to add a scrollbar on the text widget using Grid Layout Manager in Python Tkinter.
• The strategy is will place the text widget & scrollbar widget at row=0 and column=0 for the Text widget and column=1 for the scrollbar widget. In this way, both the widgets will appear parallel to each other (lines 19, 27).
• By using sticky we will stretch the scrollbar in the north-south direction (line 27).
• In the end, we’ll bind the scrollbar with the text box widget (lines 29, 30)

from tkinter import *
ws = Tk()
ws.title('Scrollbar Grid')

frame = Frame(
    ws,
    bg='#A8B9BF'
    )

text_box = Text(
    ws,
    height=13,
    width=32, 
    font=(12)  
)

text_box.grid(row=0, column=0)

sb = Scrollbar(
    ws,
    orient=VERTICAL
    )

sb.grid(row=0, column=1, sticky=NS)

text_box.config(yscrollcommand=sb.set)
sb.config(command=text_box.yview)

ws.mainloop()

I have executed the above example code and added the screenshot below.

In this output, you can see that the scrollbar started appearing immediately after the words started exceeding the Text box size.

Read Registration form in Python using Tkinter + Login page in Python Tkinter with database SQLite3

3. Scrollbar Frame

Scrollbar in Python is not always possible to put in all the text on the screen. As that will hamper the readability of the content also it will be ugly on the screen.

• To solve this problem, scrollbars were introduced. Now users can access the huge text information simply by scrolling the scrollbar.
• Applying a scrollbar on the Frame is the easiest and the best way of doing it. Simply put both (scrollbar & other widgets) inside the frame window and then pack them in opposite directions.
• For example, pack the scrollbars on the right and other widgets on the left.
• Here is the implementation of scrollbars on the Frame widget. Tkinter can be applied on Frame which will help the user to scroll either horizontally or vertically direction of the screen.

from tkinter import *
ws = Tk()
ws.title('PythonGuides')
ws.geometry('400x300')

frame = Frame(
    ws,
    bg='#A8B9BF'
    )

text_box = Text(
    ws,
    height=13,
    width=32, 
    font=(12)  
)
text_box.pack(side=LEFT,expand=True)

sb_ver = Scrollbar(
    ws,
    orient=VERTICAL
    )

sb_ver.pack(side=RIGHT, fill=Y)

text_box.config(yscrollcommand=sb_ver.set)
sb_ver.config(command=text_box.yview)

ws.mainloop()

I have executed the above example code and added the screenshot below.

In this output, the scrollbar is marked on the right. Scrolling the scrollbar will show the text in the text box.

Check out BMI Calculator Using Python Tkinter

4. Scrollbar Canvas

Canvas is a free space where diagrams can be drawn. Apart from drawing, we can also place graphics & widgets (frame, text box, buttons, etc) on it.

• In this section, we will learn how to add a scrollbar on canvas. Also, we’ll create an application to demonstrate the Python Tkinter scrollbar on Canvas.
• Canvas is used to create a canvas widget in the program followed by the name of the window where you want to place it. Also, provide the width and height of the canvas window.

from tkinter import *

ws = Tk()
ws.title('Scrollbar Canvas')

frame = Frame(
    ws,
    width=500,
    height=400
    )
frame.pack(expand=True, fill=BOTH)

canvas=Canvas(
    frame,
    bg='#4A7A8C',
    width=500,
    height=400,
    scrollregion=(0,0,700,700)
    )

vertibar=Scrollbar(
    frame,
    orient=VERTICAL
    )
vertibar.pack(side=RIGHT,fill=Y)
vertibar.config(command=canvas.yview)

horibar=Scrollbar(
    frame,
    orient=HORIZONTAL
    )
horibar.pack(side=BOTTOM,fill=X)
horibar.config(command=canvas.xview)

canvas.config(width=500,height=400)

canvas.config(
    xscrollcommand=horibar.set, 
    yscrollcommand=vertibar.set
    )
canvas.pack(expand=True,side=LEFT,fill=BOTH)

ws.mainloop()

I have executed the above example code and added the screenshot below.

Check out Python Tkinter Title

5. Scrollbar Text Box

We have applied a scrollbar on the text widget. The output of this program will look similar to the Python Tkinter Scrollbar Frame.

• In Python Tkinter, scrollbar frame we have applied a scrollbar on the frame widget but here we are going to apply it to the text widget directly.
• We have created a Text widget in Python Tkinter and packed it to LEFT. Then we created a scrollbar widget and packed it to RIGHT.
• The layout manager used is a pack() code is present on lines 15, 23

from tkinter import *

ws = Tk()
ws.title('Text box')
ws.geometry('400x300')

frame = Frame(ws)

text_box = Text(
    ws,
    height=13,
    width=32, 
    font=(12)  
)

text_box.pack(side=LEFT,expand=True)

sb_ver = Scrollbar(
    ws,
    orient=VERTICAL
    )

sb_ver.pack(side=RIGHT, fill=Y)

text_box.config(yscrollcommand=sb_ver.set)
sb_ver.config(command=text_box.yview)

ws.mainloop()

I have executed the above example code and added the screenshot below.

In this output, you can see that text is displayed on the Text box and a scrollbar is appearing on the right side of the window.

Read How to Set Background to be an Image in Python Tkinter

6. Scrollbar Not Working

In this section, we will see the possible reasons why the scrollbar does not work. Also, we’ll talk about the common errors and their fix while implementing the scrollbar in Python Tkinter.

• Missing Layout Manager: The first thing to check if you are not seeing the scrollbar on the screen is to see if the scrollbar widget is positioned using layout manager (pack, grid, place).
• Appearing Small: If the scrollbar in Python Tkinter is appearing small in that case
  • if you are using grid layout manager, use sticky and set the scrollbar to NS for the vertical scrollbar and EW for the horizontal scrollbar.
  • If you are using pack layout manager, use fill=X for horizontal and fill=Y for vertical scrollbar(s).

Check out Python Tkinter to Display Data in Textboxes

7. Scrollbar Text Widget

We have applied a scrollbar on the text widget. The output of this program will look similar to the Python Tkinter Scrollbar Frame.

• In Python Tkinter Scrollbar Frame we have applied a scrollbar on the Frame widget but here we are going to apply it on the Text widget directly.
• We have created a text widget in Python Tkinter and packed it to LEFT. Then we created a scrollbar widget and packed it to RIGHT.
• The Layout manager used is pack() code is present on lines 15, and 23.

from tkinter import *

ws = Tk()
ws.title('PythonGuides')
ws.geometry('400x300')

text_box = Text(
    ws,
    height=13,
    width=32, 
    font=(12)  
)

text_box.pack(side=LEFT,expand=True)


sb_ver = Scrollbar(
    ws,
    orient=VERTICAL
    )

sb_ver.pack(side=RIGHT, fill=Y)

text_box.config(yscrollcommand=sb_ver.set)
sb_ver.config(command=text_box.yview)

ws.mainloop()

In the output, the text is displayed on the Text box and a scrollbar appears on the right side of the window.

Check out How to Create Countdown Timer using Python Tkinter

Example: Customer Data Table

Let’s put all these steps together and create a scrollable table displaying customer data. Assume we have a list of customers with their names, email addresses, and phone numbers.

import tkinter as tk

root = tk.Tk()
root.title("Customer Data")

# Create a canvas and scrollbar
canvas = tk.Canvas(root)
scrollbar = tk.Scrollbar(root, orient=tk.VERTICAL, command=canvas.yview)
canvas.configure(yscrollcommand=scrollbar.set)

# Create a frame inside the canvas
frame = tk.Frame(canvas)
canvas.create_window((0, 0), window=frame, anchor='nw')

# Add table headers
headers = ['Name', 'Email', 'Phone']
for col, header in enumerate(headers):
    tk.Label(frame, text=header, font=('Arial', 12, 'bold')).grid(row=0, column=col, padx=10, pady=5)

# Add customer data to the table
customers = [
    ('John Doe', 'john@example.com', '(123) 456-7890'),
    ('Jane Smith', 'jane@example.com', '(987) 654-3210'),
    # Add more customer data here
]

for row, customer in enumerate(customers, start=1):
    for col, item in enumerate(customer):
        tk.Label(frame, text=item).grid(row=row, column=col, padx=10, pady=5)

# Update the scroll region
frame.update_idletasks()
canvas.configure(scrollregion=canvas.bbox('all'))

canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

root.mainloop()

In this example, we create a table with headers for Name, Email, and Phone. The customer data is displayed in the subsequent rows. If the number of customers exceeds the visible area, the scrollbar becomes active, allowing the user to scroll through the data.

Read Upload a File in Python Tkinter

Best Practices and Tips

When working with scrollable frames in Python Tkinter, keep the following best practices and tips in mind:

• Use meaningful variable names for clarity and readability.
• Separate the creation of widgets and the layout configuration for better code organization.
• Adjust the size of the canvas and frame according to your content requirements.
• Handle dynamic content by updating the scroll region whenever the content changes.
• Consider using custom styles or themes to enhance the visual appeal of your application.

Read Python Tkinter drag and drop

Conclusion

In this tutorial, I have explained how to create scrollable frames with Python Tkinter. I discussed how to create a scrollbar , scrollbar frame, scrollbar canvas, scrollbar text box, scrollbar not working, and scrollbar text widget. I also covered real-time example and some best practices and tips.

You may like to read:

• How to Create Date Time Picker using Python Tkinter
• How to go to next page in Python Tkinter Program
• How to read a text file using Python Tkinter

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/