Search code examples
pythontkintercustomtkinter

CustomTkinter Scrollable Frame Is Not Working As Expected


I am trying to make a chat application using Tkinter + CustomTkinter . The app, whenever I click a button places the element on the window and then uses the frameChat._parent_canvas.yview_moveto(1) function to scroll down to the latest message, but that doesnt seem to work if you run the code given below

import customtkinter
from customtkinter import *
import tkinter
from PIL import Image

customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("blue.json")

root = tkinter.Tk()

root.title("🍕 PizzBot")
root.geometry("455x771")
root.resizable(False, False)
root.configure(background="#2C2C2C")
send = Image.open("send.png")
head = Image.open("ChatBot CanvaDesign.png")
pizzaIco = Image.open("pizza.png")
usr = Image.open("user.png")

framePrompt = customtkinter.CTkFrame(root)
framePrompt.pack(side=BOTTOM)
frameChat = customtkinter.CTkScrollableFrame(root, width=430,height=650)
frameChat.pack()

prompt_input = customtkinter.CTkEntry(framePrompt,height=55,width=375,border_width=0,placeholder_text="Type your prompt here",placeholder_text_color=("gray95", "grey"),font=("Poppins", 18),)
prompt_input.grid(column=0, row=0, padx=6, pady=8)
def executeSend():
    customtkinter.CTkLabel(frameChat,text="\n").pack()

    label = customtkinter.CTkLabel(frameChat,text=prompt_input.get(),font=("Poppins", 20,"bold"),anchor="w",width=20,height=35,wraplength="300",justify="left",padx=20,pady=20,text_color="white",fg_color="#3f52ff",corner_radius=20)
    frameChat.configure(width=430,height=700)
    label.pack(anchor="e",padx=10)

    customtkinter.CTkLabel(frameChat,text="\n").pack()

    promptReply = customtkinter.CTkLabel(frameChat,text="Bot Response Goes Here . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna magna, ultrices sit amet auctor sit amet, facilisis in enim. Etiam leo nunc, vulputate vitae sem eu, vehicula laoreet purus. Nam vulputate et lacus vel iaculis. Pellentesque vel eros dui. Quisque consectetur sed felis sed lacinia.",fg_color="white",text_color="#3F52FF",padx=20,pady=20,wraplength="300",justify="left",anchor="w",font=("Quicksand",18),corner_radius=10,)
    promptReply.pack(anchor="w",padx=10)

    frameChat.configure(height=600)

    root.after(100,frameChat._parent_canvas.yview_moveto(1))#Code To Move The Scrollbar Down

    customtkinter.CTkFrame(frameChat,fg_color="#2C2C2C",width=410,height=15).pack()
    customtkinter.CTkFrame(frameChat,fg_color="#3F52FF",width=10,height=5).pack()
    customtkinter.CTkLabel(frameChat,text="\n").pack()

btnSend = customtkinter.CTkButton(framePrompt,text="",corner_radius=10,image=CTkImage(light_image=send, dark_image=send),width=55,height=55,command=executeSend)
btnSend.grid(column=1, row=0)

prompt_input.bind("<Return>", lambda event: executeSend())

root.mainloop()

Though it does scroll down a little, it doesnt quite scroll all the way to the bottom

I tried to use frameChat._parent_canvas.yview_moveto(1) but that only works partially

PS. The indentation of the code might have gone wrong while posting the question


Solution

  • When you do:

    root.after(100,frameChat._parent_canvas.yview_moveto(1))
    

    You are calling the function.

    It is same as writing:

        frameChat._parent_canvas.yview_moveto(1)
        root.after(100, None)
    

    You need to replace it with:

    root.after(100,frameChat._parent_canvas.yview_moveto, 1)
    

    or with

    root.after(100, lambda : frameChat._parent_canvas.yview_moveto(1))
    

    More about .after method.