Tkinter treeview scroll bar not shown properly

Question

I have created a window application using tkinter with multiple frames. In code snippet below, frame frm1 I have added a treeview widget which works fine, but as soon as I associate a vertical and horizontal scrollbar - the tree view widget is show shrinked to the top left corner. Why is this happening?

See below the code snippet

import tkinter as tk
from tkinter import ttk
from tkinter import BOTTOM, TOP, RIGHT, LEFT, SUNKEN, W, X, Y, NO, VERTICAL, HORIZONTAL, DISABLED, NONE, S, N, E, W

class myApp:
    def __init__(self, wnd):
        self.wnd = wnd
        self.wnd.title(f"My App")
        self.wnd.geometry('1300x700')
        self.wnd.resizable(False, False)

        self.top_frame = tk.Frame(master=self.wnd, width=1300, height=90, highlightcolor="black", highlightbackground="black",bg='yellow')
        self.center = tk.Frame(master=self.wnd, width=1300, height=600, highlightcolor="black", highlightbackground="black",)
        self.status_frame = tk.Frame(master=self.wnd, width=1300, height=22, highlightcolor="black", highlightbackground="black", highlightthickness=1,bg='red')

        self.wnd.grid_rowconfigure(0, weight=1)
        self.wnd.grid_rowconfigure(1, weight=1)
        self.wnd.grid_rowconfigure(2, weight=1)
   
        self.top_frame.grid(row=0, column=0,sticky="n")
        self.center.grid(row=1, column=0, sticky="n")
        self.status_frame.grid(row=2, sticky="nsew")

##############################

        self.center.grid_columnconfigure(0, weight=1)
        self.center.grid_columnconfigure(1, weight=1)
   
        self.ctr_left = tk.Frame(self.center, width=900, height=600, highlightcolor="black", highlightbackground="black", highlightthickness=1)
        self.ctr_right = tk.Frame(self.center, width=400, height=600, highlightcolor="black", highlightbackground="black", highlightthickness=1)
   
        self.ctr_left.grid(row=0, column=0, sticky="nsew")
        self.ctr_right.grid(row=0, column=1, sticky="nsew")
   
###############################       
    
        self.ctr_left.grid_rowconfigure(0, weight=1)
        self.ctr_left.grid_rowconfigure(1, weight=1)
   
        self.frm1 = tk.Frame(self.ctr_left, width=900, height=550, highlightcolor="black", highlightbackground="black", bg='green')
        self.frm2 = tk.Frame(self.ctr_left, width=900, height=50, highlightcolor="black", highlightbackground="black", highlightthickness=1,bg='purple')
   
        self.frm1.grid(row=0, column=0, sticky="nw")
        self.frm2.grid(row=1, column=0, sticky="sw")

################################
   
        self.ctr_right.grid_rowconfigure(0, weight=1)
        self.ctr_right.grid_rowconfigure(1, weight=1)
   
        self.frm3 = tk.Frame(self.ctr_right, width=400, height=550, highlightcolor="black", highlightbackground="black", bg='orange')
        self.frm4 = tk.Frame(self.ctr_right, width=400, height=50, highlightcolor="black", highlightbackground="black", highlightthickness=1,bg='pink')
   
        self.frm3.grid(row=0, column=0, sticky="nw")
        self.frm4.grid(row=1, column=0, sticky="se")
   
    
        #add treeview to frame frm1
        self.style = ttk.Style()
        self.style.theme_use("clam")
        self.style.configure("Treeview",
            background="silver",
            foreground="black",
            fieldbackground="silver")
        self.style.map("Treeview", background=[('selected','green')])
   

        self.my_tree = ttk.Treeview(master=self.frm1, height=26)
   
        # define our columns
        self.my_tree['columns'] = ("Date & Time", "Type", "Log Message")
        self.my_tree.column("#0", width=0, minwidth=0, stretch=NO)
        self.my_tree.column("Date & Time", anchor=W, width=140, minwidth=140)
        self.my_tree.column("Type", anchor=W, width=70, minwidth=70)
        self.my_tree.column("Log Message", anchor=W, width=685, minwidth=400, stretch=True)

        # create headings
        self.my_tree.heading("#0", text="", anchor=W)
        self.my_tree.heading("Date & Time", text="Date & Time", anchor=W)
        self.my_tree.heading("Type", text="Type", anchor=W)
        self.my_tree.heading("Log Message", text="Log Message", anchor=W)
        self.my_tree.grid(row=0, column=0, sticky="nsew")
   
        #add scrollbar to treevew widget my_tree
        self.ytree_scroll = ttk.Scrollbar(master=self.my_tree, orient=VERTICAL, command=self.my_tree.yview)
        self.xtree_scroll = ttk.Scrollbar(master=self.my_tree, orient=HORIZONTAL, command=self.my_tree.xview)       
        self.ytree_scroll.grid(row=0, column=0, sticky="nse")
        self.xtree_scroll.grid(row=0, column=0, sticky="ews")
   
        self.my_tree.configure(yscroll=self.ytree_scroll.set, xscroll=self.xtree_scroll.set)      
    

        #add scrollbar to frame widget frm3
#        self.ytree_scroll1 = ttk.Scrollbar(master=self.frm3, orient=VERTICAL)
#        self.xtree_scroll1 = ttk.Scrollbar(master=self.frm3, orient=HORIZONTAL)       
#        self.ytree_scroll1.grid(row=0, column=0, sticky="nse")
#        self.xtree_scroll1.grid(row=0, column=0, sticky="ews")


if __name__ == "__main__":
    window = tk.Tk()
    application = myApp(window)
    window.mainloop()

Answer 1

You should add the scrollbars not on the treeview itself, but on the same parent window. So you should do it like this:

    self.ytree_scroll = ttk.Scrollbar(master=self.frm1, orient=VERTICAL, command=self.my_tree.yview)
    self.xtree_scroll = ttk.Scrollbar(master=self.frm1, orient=HORIZONTAL, command=self.my_tree.xview)       
    self.ytree_scroll.grid(row=0, column=1, sticky="nse")
    self.xtree_scroll.grid(row=1, column=0, columnspan=2, sticky="ews")

After that you should change some things because this gives some whitespace on the neighbouring frames.