Tkinter ttk.Scrollbar on canvas is scrolling properly but scrollbar widget not appearing properly?

Question

This is my first time putting a scroll widget with a canvas, but I'm not sure what I'm doing wrong. I feel as though it may be an issue with the widgets I'm inserting into the canvas which is from a for loop.

Here is the portion of my code which creates the scrollbar and canvas (I have taken out some lines of code which are irrelevant):

#Raise the Browse Frame
def BrowseFrame(): <--- I bound this to the button which raises the browse window

    global B_scrollableFrame
    global images

    for widget in B_scrollableFrame.winfo_children():
        widget.destroy()

    # CREATE BOOKS OPTIONS #
    #Connect to database
    conn=sqlite3.connect(db_file)
    cur=conn.cursor()

    cur.execute('''SELECT BookDetails.ISBN, BookDetails.Title, Authors.FirstName ||' '|| Authors.LastName, Genre.Genre
        From BookDetails
        INNER JOIN Genre ON BookDetails.Genre = Genre.ID
        INNER JOIN Authors ON BookDetails.Author = Authors.ID
        ORDER BY BookDetails.Title ASC
        ''')

    i=0
    Frames=[]
    buttons=[]
    images=[]
    labels=[]

    for row in cur:

        Frames.append(tk.Frame(B_scrollableFrame,width=560,height=150,bg='white',highlightbackground='black',highlightcolor='black',highlightthickness=1))
        Frames[-1].grid(row=i,column=0,padx=(38,0),pady=(30,0))
        Frames[-1].pack_propagate(False)

        try:
            B_img=tk.PhotoImage(file=row[1]+'.PNG')
            B_img=B_img.subsample(2,2)
            images.append(B_img)
            labels.append(tk.Label(Frames[-1],image=B_img).pack(side='left',fill=Y))

        except:
            B_img=tk.PhotoImage(file='NA.PNG')
            B_img=B_img.subsample(2,2)
            images.append(B_img)
            labels.append(tk.Label(Frames[-1],image=B_img).pack(side='left',fill=Y))

        tk.Label(Frames[-1],text=row[1],font=("Helvetica",24,"bold"),bg='white',wraplength=380).pack(fill=X,expand=TRUE)


        buttons.append(tk.Button(Frames[-1],text='\n',command=lambda txt=row[0] : ViewBook(txt),width=5,cursor='hand2'))
        buttons[-1].pack(side='right')


        tk.Label(Frames[-1],text='          '+row[2],font=("Helvetica",18,'italic'),bg='white').pack(side='left')
        tk.Label(Frames[-1],text='     '+row[3],font=("Helvetica",18),bg='white').pack(side='left')
        #print(i)

        i= i+1

    #print(Frames)
    conn.close()

    master.lift()
    BROWSE_FRAME.lift()


#Set up Page
BROWSE_FRAME=tk.Frame(master,borderwidth=1,width=661,height=431,bg=borderColour)
BROWSE_FRAME.grid(row=2,rowspan=12,column=0,pady=(6,0),padx=(0,4),sticky=E)
BROWSE_FRAME.pack_propagate(False)
BROWSE_FRAME.grid_propagate(False)

BROWSE_FRAME.grid_columnconfigure(0, weight=1)
BROWSE_FRAME.grid_columnconfigure(1, weight=1)

canvas=tk.Canvas(BROWSE_FRAME,height=375,width=635)
scrollbar=ttk.Scrollbar(BROWSE_FRAME, orient='vertical', command=canvas.yview)
B_scrollableFrame=tk.Frame(canvas)


B_scrollableFrame.bind(
    '<Configure>',
    lambda event, canvas=canvas:canvas.configure(
        scrollregion=canvas.bbox('all')
    )
)


canvas.create_window((0,0), window=B_scrollableFrame, anchor='nw')

canvas.grid(row=1,column=0,columnspan=5)
scrollbar.grid(row=1,column=6,sticky=NS)

scrollbar.config(command=canvas.yview)

With my full code, the result I get is a scrollable canvas, but the "bar" of the scrollbar fills the whole scrollbar widget. The thing is, I can still use it to scroll by click and dragging the bar.

Here is an image: Canvas with Scrollbar

I have no idea why this is happening. I've already tried creating the scrollbar widget after inserting the widgets from the for loop, but the result is still the same.

Anyone have any idea why this is happening? Is there anyway I can work around this?

Answer 1

You need to use canvas["yscrollcommand"] = scrollbar.set after the scrollbar is created.