Search code examples
pythonwindowstkinterresponsive-designdesktop-application

Python/Tkinter Frontend Frame


When opened normally Fullscreen

i'm working on my first ever project, and i'm using python/tkinter. i've come up with this design(above) but i can't make it responsive.

i want the bottom section to stay the same but i want to extend the top part through the bottom.

from tkinter import *

root = Tk()

topFrame = Frame(root)
topFrame.pack(side=TOP, fill=BOTH)

scrollbar = Scrollbar(topFrame)
scrollbar.pack(side=RIGHT, fill=Y)

listbox = Listbox(topFrame)
listbox.pack(fill=BOTH)

for i in range(100):
    listbox.insert(END, i)

#attaching list and scroll

listbox.config(yscrollcommand=scrollbar.set)
scrollbar.config(command=listbox.yview)

#bottom frame

bottomFrame = Frame(root)
bottomFrame.pack(side=BOTTOM, fill=X)

#bottom laft frame

b_leftFrame = Frame(bottomFrame)
b_leftFrame.pack(side=LEFT, fill=X)

#defining label

label1 = Label(b_leftFrame, text="Title")
label1.grid(row=0, column=0, sticky=E)

label2 = Label(b_leftFrame, text="Author")
label2.grid(row=0, column=2, sticky=E)

label3 = Label(b_leftFrame, text="Publisher")
label3.grid(row=0, column=4, sticky=E)

label4 = Label(b_leftFrame, text="Year")
label4.grid(row=0, column=6, sticky=E)

label5 = Label(b_leftFrame, text="Translator")
label5.grid(row=0, column=8, sticky=E)

#defining labels

title_text =StringVar()
entry1 = Entry(b_leftFrame, textvariable=title_text)
entry1.grid(row=0, column=1)

author_text =StringVar()
entry2 = Entry(b_leftFrame, textvariable=author_text)
entry2.grid(row=0, column=3)

publisher_text =StringVar()
entry3 = Entry(b_leftFrame, textvariable=publisher_text)
entry3.grid(row=0, column=5)

year_text =StringVar()
entry4 = Entry(b_leftFrame, textvariable=year_text)
entry4.grid(row=0, column=7)

translator_text =StringVar()
entry4 = Entry(b_leftFrame, textvariable=translator_text)
entry4.grid(row=0, column=9)

#bottom right

b_rightFrame = Frame(bottomFrame)
b_rightFrame.pack(side=RIGHT)

#buttons

b1=Button(b_rightFrame, text="View All", width=12)
b1.grid(row=2, column=3)

b1=Button(b_rightFrame, text="Search Entry", width=12)
b1.grid(row=3, column=3)

b1=Button(b_rightFrame, text="Add Entry", width=12)
b1.grid(row=4, column=3)

b1=Button(b_rightFrame, text="Update selected", width=12)
b1.grid(row=5, column=3)

b1=Button(b_rightFrame, text="Delete selected", width=12)
b1.grid(row=6, column=3)

b1=Button(b_rightFrame, text="Close", width=12)
b1.grid(row=7, column=3)



root.mainloop()

Solution

  • The problem here is that the topFrame widget, which contains the Listbox, is not taking all the available space.

    Try replacing your:

    topFrame.pack(fill=BOTH)
    

    with:

    topFrame.pack(fill=BOTH, expand=YES)
    

    This will make the topFrame expand once you maximize the window.

    Also, in order to make the listbox expand as well, replace your

    listbox.pack(fill=BOTH)
    

    with:

    listbox.pack(fill=BOTH, expand=YES)