Python - Tkinter: Scrollbar not aligning properly

Question

I am working on a python tkinter desktop applicaiton. I need a scrollbar on the right side of the frame with a vertical orientation. I am trying to display a ttk scrollbar but it does not seem to display properly. My table disappears and the height of the scrollbar is not correct either. Also, if possible, the scrollbar needs to appear only when the TreeView overflows and when it doesnt overflow, then the scrollbar should not be displayed.

import tkinter
from turtle import color, width
import win32com.client
import sys
import subprocess
import time
from tkinter import*
from tkinter import ttk
from tkinter import messagebox

class TestingGui():
    def __init__(self):
 
        print("testing")

    def registerUser(self):
        userName = "tim"
        userAge = "36"
        userGender = "male"
        userPosition = "softeware engineer"

        userInfo = [userName.upper(),userAge,userGender,userPosition]
        tree.column(0,anchor='center')
        tree.column(1,anchor='center')
        tree.column(2,anchor='center')
        tree.column(3,anchor='center')
        tree.insert('',0,values=userInfo)

if __name__ == '__main__':
    window = Tk()
    window.title('Dashboard')
    window.geometry('925x500+300+200')
    window.configure(bg="#fff")
    window.resizable(False,False)


################### Frame (Top)[start] #####################################
    frameTop = Frame(window,width=860,height=60,bg='white')
    frameTop.place(x=40,y=40)
    uploadExcelBtn = Button(frameTop,width=19,pady=7,text='Upload Excel',bg='#787c82',fg='white',cursor='hand2',border=0).place(x=715,y=13)
    excelFileInputField = Entry(frameTop,width=58,fg='black',border=1,bg='white',font=('Microsoft YaHei UI Light',15,'bold'))
    excelFileInputField.place(x=8,y=14)
################### Frame (Top)[end] #######################################

################### Table (Center)[start] #####################################
    columns = ('name','age','gender','position')


    frameCenter = Frame(window,width=860,height=315,bg='#f0f0f1')
    frameCenter.place(x=40,y=110)

    treeScroll = ttk.Scrollbar(frameCenter,orient="vertical")
    treeScroll.pack(side=RIGHT,fill="y")

    tree = ttk.Treeview(frameCenter,height=13,columns=columns,show="headings",selectmode='browse',yscrollcommand=treeScroll.set)
    tree.heading('name',text='Name')
    tree.heading('age',text='Age')
    tree.heading('gender',text='Gender')
    tree.heading('position',text='Position')
    tree.place(x=30,y=10)

    treeScroll.config(command=tree.yview)
################### Table (Center)[end] #######################################

################### Frame (Bottom)[start] #####################################
    frameBottom = Frame(window,width=860,height=60,bg='white')
    frameBottom.place(x=40,y=430)
    addUserBtn = Button(frameBottom,width=19,pady=7,text='Add User',bg='#57a1f8',fg='white',cursor='hand2',border=0,command= lambda : TestingGui().registerUser()).place(x=30,y=15)
################### Frame (Bottom)[end] #######################################



mainloop()

score 2 · Accepted Answer · answered Oct 12 '22 at 12:43

The use of place can be tricky that's why you should use it only if other geometrymanager fail to achieve what you want. The benefit of the other two geometrymanagers by tkinter is that they calculate cells or parcels for you that you can use and easily recognize by just look at your layout.

I took the time to change your script and placed comments next to changed lines, that should explain what and why I think those changes are necessary.

#import only what you need and avoid wildcard imports due naming conflicts
import tkinter as tk #as tk as short for tkinter
from tkinter import ttk

class TestingGui():
    def __init__(self):
 
        print("testing")

    def registerUser(self):
        userName = "tim"
        userAge = "36"
        userGender = "male"
        userPosition = "softeware engineer"

        userInfo = [userName.upper(),userAge,userGender,userPosition]
        tree.column(0,anchor='center')
        tree.column(1,anchor='center')
        tree.column(2,anchor='center')
        tree.column(3,anchor='center')
        tree.insert('',0,values=userInfo)

if __name__ == '__main__':
    window = tk.Tk()
##    bonus: leading tk. symbols you are using tk
    window.title('Dashboard')
    window.geometry('925x500+300+200')
    window.configure(bg="#fff")
    window.resizable(False,False)
    #Window Content
    topframe = tk.Frame(window,width=860,height=60,bg='white')
    centerframe = tk.Frame(window,width=860,height=315,bg='#f0f0f1')
    bottomframe = tk.Frame(window,width=860,height=60,bg='white')
    topframe.pack(side=tk.TOP, padx=(40,0),pady=(40,0),fill=tk.X)
    centerframe.pack(side = tk.TOP, fill= tk.BOTH, padx=(40,0))
    bottomframe.pack(side=tk.BOTTOM, padx=(40,0), fill= tk.X)
##    fill = stretch in master
##    padx/y are offsets like x/y in place but using their parcels
##    keeping content together helps for an overview of content
    #frameTop Content
    input_field = tk.Entry(
        topframe, width=58, fg='black', border=1, bg='white',
        font=('Microsoft YaHei UI Light',15,'bold'))
    input_field.pack(side=tk.LEFT)
    upload_button = tk.Button(
        topframe, width=19, pady=7, text='Upload Excel',
        bg='#787c82',fg='white',cursor='hand2',border=0)
    upload_button.pack(side=tk.TOP)
##    seperate the constructor from the geometry method to keep a reference
##    split lines for readability compare PEP-8 Style Guide
##    dont use camelcase variable names compare PEP-8 Style Guide
##    the order of packing matters in this geometry manager
    #centerframe Content
    treeScroll = ttk.Scrollbar(centerframe,orient="vertical")
    treeScroll.pack(side=tk.RIGHT,fill="y")
    #tk.RIGHT = tkinter constant
    columns = ('name','age','gender','position')
    tree = ttk.Treeview(
        centerframe, height=13, columns=columns,
        show="headings",selectmode='browse',yscrollcommand=treeScroll.set)
    tree.heading('name',text='Name')
    tree.heading('age',text='Age')
    tree.heading('gender',text='Gender')
    tree.heading('position',text='Position')
    tree.pack(side=tk.TOP, padx=(30,0),pady=10)
    treeScroll.config(command=tree.yview)
    #bottomframe Content
    add_user_button = tk.Button(
        bottomframe, width=19, pady=7,text='Add User',
        bg='#57a1f8',fg='white',cursor='hand2', border=0)
        #command= lambda : TestingGui().registerUser())#DONT DO THIS!
##    Only use lambda if needed
##    It makes little to no sense to initiate a class in a lambda expression
    add_user_button.pack(padx=(30,0),side=tk.LEFT)
    #start mainloop
    tk.mainloop()#indention correcture

In addition I wrote something to [How do I organize my tkinter GUI](https://stackoverflow.com/questions/63536505/how-do-i-organize-my-tkinter-appllication/63536506#63536506) to render an overview. — Thingamabobs, Oct 12 '22 at 12:55

Python - Tkinter: Scrollbar not aligning properly

1 Answers1