So, I have this piece of code:
import tkinter as tk
root = tk.Tk()
root.geometry("400x300")
root.columnconfigure(0, weight=1, minsize=75)
root.rowconfigure(0, weight=1, minsize=50)
subjects = ["None"]
frm_new_grade = tk.Frame()
lbl_new_grade = tk.Label(text="New Grade", font="System")
lbl_add_subject = tk.Label(frm_new_grade, text="Subject:", font="System")
lbl_add_subject.grid(row=0, column=0, sticky="E")
subject_value = tk.StringVar(frm_new_grade)
subject_value.set("Select an Option")
question_menu = tk.OptionMenu(frm_new_grade, subject_value, *subjects)
question_menu_menu = root.nametowidget(question_menu.menuname)
question_menu_menu.config(font="System")
question_menu.config(font="System")
question_menu.grid(row=0, column=1, sticky="W")
btn_new_subject = tk.Button(frm_new_grade, text="+", font="System", width=2)
btn_new_subject.grid(row=0, column=2, padx=5, sticky="W")
lbl_add_grade = tk.Label(frm_new_grade, text="Grade:", font="System")
lbl_add_grade.grid(row=1, column=0, sticky="E")
ent_add_grade = tk.Entry(frm_new_grade, font="System", width=18)
ent_add_grade.grid(row=1, column=1, columnspan=2, sticky="W")
btn_add_grade = tk.Button(frm_new_grade, text="Add Grade", font="System")
btn_add_grade.grid(row=2, column=1, sticky="W", pady=5)
frm_new_grade.grid()
root.mainloop()
My problem is that I want btn_new_subject to be right next to question_menu at all times, like when question_menu has "Select an Option", but not like when I select "None"
I tried to fix this using columnspan on ent_add_grade (like you see on my code), I thought that this with the sticky properties of btn_new_subject would make it so that they are right next to each other, but instead I get btn_new_subject placed like if it had no sticky property.
I'm quite new to programming and python so any feedback will be appreciated.
You can just set sticky="EW" in question_menu.grid(...) so that question_menu will fill the space horizontally in the cell.
Result:
There is typo error missing for lbl_new_grade.grid()
In line 12, add root for lbl_new_grade(frm_new_grade,
Set all row=x, column=0. The x denote 1, 2 and 3. While row=2
column=1. And for btn_add_grade.grid(row=3, column=1
If you like layout for root.geometry("235x150")
If you like w/out glitch for layout. Then set index to 1
root.columnconfigure(1,
It is up to you to decide.
Snippet for readability:
import tkinter as tk
root = tk.Tk()
root.geometry("235x150")
root.columnconfigure(0, weight=1, minsize=75)
root.rowconfigure(3, weight=1, minsize=50)
subjects = ["None"]
frm_new_grade = tk.Frame()
lbl_new_grade = tk.Label(frm_new_grade, text="New Grade", bg='red', font="System")
lbl_new_grade.grid(row=0, column=1)
lbl_add_subject = tk.Label(frm_new_grade, text="Subject:", font="System")
lbl_add_subject.grid(row=1, column=0, sticky="WE", pady=10)
subject_value = tk.StringVar(frm_new_grade)
subject_value.set("Select an Option")
question_menu = tk.OptionMenu(frm_new_grade, subject_value, *subjects)
question_menu_menu = root.nametowidget(question_menu.menuname)
question_menu_menu.config(font="System")
question_menu.config(font="System")
question_menu.grid(row=1, column=1, sticky="WE")
btn_new_subject = tk.Button(frm_new_grade, text="+", font="System", width=2)
btn_new_subject.grid(row=1, column=2, padx=5, sticky="WE")
lbl_add_grade = tk.Label(frm_new_grade, text="Grade:", font="System")
lbl_add_grade.grid(row=2, column=0, sticky="W")
ent_add_grade = tk.Entry(frm_new_grade, font="System", width=18)
ent_add_grade.grid(row=2, column=1, columnspan=2, sticky="W")
btn_add_grade = tk.Button(frm_new_grade, text="Add Grade", font="System")
btn_add_grade.grid(row=3, column=1, sticky="W", pady=5)
frm_new_grade.grid()
root.mainloop()
Screenshot:
Related
Somehow the buttons placed using grid method will be much bigger than the cell width defined by columnconfigure. I tried to place some test labels in the same way, and it worked as expected. Is there any way to get correct button width like these labels did?
Below is the simplified code to the question:
import tkinter as tk
from tkinter.ttk import *
root = tk.Tk()
style = Style()
style.theme_use('clam')
style.configure('TestLabel1.TLabel', background='red')
style.configure('TestLabel2.TLabel', background='green')
style.configure('TestLabel3.TLabel', background='blue')
style.configure('Buttons.TButton')
output_path = tk.StringVar()
output_path.set('test')
settings = Frame(root, width=500, height=200)
settings.pack_propagate(0)
settings.pack(side='top')
chart_preset_frame = LabelFrame(settings, text='Chart Parameter Preset', padding=(5, 5, 5, 5))
chart_preset_frame.pack(expand=True, fill='x', pady=10, side='top')
chart_preset_frame.columnconfigure(0, weight=6)
chart_preset_frame.columnconfigure(1, weight=2)
chart_preset_frame.columnconfigure(2, weight=2)
output_path_input = Entry(chart_preset_frame, textvariable=output_path, width=20)
output_path_input.grid(row=0, column=0, columnspan=3, sticky='EW', ipady=5)
output_load_btn = Button(chart_preset_frame, text='Load...', style='Buttons.TButton', command=None)
output_load_btn.grid(row=1, column=1, sticky='EW', padx=0, pady=5)
output_save_btn = Button(chart_preset_frame, text='Save As...', style='Buttons.TButton', command=None)
output_save_btn.grid(row=1, column=2, sticky='EW', padx=0, pady=5)
# for label test
# label_test_1 = Label(chart_preset_frame, text='test', style='TestLabel1.TLabel')
# label_test_1.grid(row=1, column=0, sticky='EW')
# label_test_2 = Label(chart_preset_frame, text='test', style='TestLabel2.TLabel')
# label_test_2.grid(row=1, column=1, sticky='EW')
# label_test_3 = Label(chart_preset_frame, text='test', style='TestLabel3.TLabel')
# label_test_3.grid(row=1, column=2, sticky='EW')
root.mainloop()
weight is just a guideline to the layout manager how to distribute available spaces. Since there is no widget in cell (row 1, column 0), it may not get the required space.
It can be enforced by adding uniform=1 to those columnconfigur(...):
chart_preset_frame.columnconfigure(0, weight=6, uniform=1)
chart_preset_frame.columnconfigure(1, weight=2, uniform=1)
chart_preset_frame.columnconfigure(2, weight=2, uniform=1)
Result:
from tkinter import *
win=Tk()
var = StringVar()
l = Label(win, bg='white', width=15)
l.grid(row=17,column=1,padx=10, pady=10, sticky='w')
def print1_selection():
if var.get()=="Number":
lab1= Label(win, text="Enter a number").grid(row=4, column=0)
ent1=Entry(win).grid(row=4, column=1)
l.config(text='you have selected ' + var.get())
elif var.get()=="Alphabet":
lab21= Label(win, text="Enter an alphabet").grid(row=5, column=0)
ent21=Entry(win).grid(row=5, column=1)
l.config(text='you have selected ' + var.get())
lbl4=Label(win, text="Select One", bg="crimson", fg="white", font=("times new
roman",15,"bold")).grid(row=1, column=0, padx=10, pady=10, sticky='w')
r1 = Radiobutton(win, text='Number',variable=var, value='Number', command=print1_selection, width=22)
r1.grid(row=2,column=0,padx=10, pady=10)
r2 = Radiobutton(win, text='Alphabet', variable=var, value='Alphabet', command=print1_selection, width=22)
r2.grid(row=2,column=1,padx=10, pady=10)
win.mainloop()
In this code I want that when I select radiobutton number, only enter a number should appear and same for the other.
But the problem is that when I select number after selecting alphabet, it shows both. I need only the selected one and eliminate the other instantly.
This is how I would approach this issue:
from tkinter import Tk, StringVar, Label, Frame, Entry, Radiobutton
def print1_selection():
for widget in entry_frame.winfo_children():
widget.destroy()
value = var.get()
lbl.config(text='You have selected ' + value)
if value == "Number":
Label(entry_frame, text="Enter a number").grid(row=0, column=0)
Entry(entry_frame).grid(row=0, column=1)
elif value == "Alphabet":
Label(entry_frame, text="Enter an alphabet").grid(row=0, column=0)
Entry(entry_frame).grid(row=0, column=1)
win = Tk()
var = StringVar(value=0)
entry_frame = Frame(win)
entry_frame.grid(row=2, column=0, columnspan=2)
lbl = Label(win, bg='white', width=20)
lbl.grid(row=3, column=0, columnspan=2, padx=10, pady=10, sticky='w')
Label(win, text="Select One", bg="crimson", fg="white", font=("times new roman", 15, "bold")).grid(row=0, column=0, padx=10, pady=10, sticky='w')
Radiobutton(win, text='Number', variable=var, value='Number', command=print1_selection, width=22).grid(row=1, column=0, padx=10, pady=10)
Radiobutton(win, text='Alphabet', variable=var, value='Alphabet', command=print1_selection, width=22).grid(row=1, column=1, padx=10, pady=10)
win.mainloop()
As You can see if You don't plan on using the widgets instance anywhere You don't have to assign it to a variable. Also no need to configure label in both statements since that will be done anyways so just do it at the beginning, also rows start from 0 too. Frames help with organizing widgets. Also if You want neither of the radiobuttons selected set the variable to 0.
I am designing a simple GUI in Python 2.7 Tkinter, but I can't get things to spread out as I want them. I have managed to get my various widgets roughly where I want them, however I can't seem to force spacing out and things are a little bunched up.
I have also tried to draw 3 LabelFrames to separate the window out, but widgets seem to fall over the LabelFrames. I am wondering how I can space this out a little better. The grid system seems to allow things to bunch up and ignores blank rows and columns as far as I can see.
from Tkinter import *
import Tkinter, Tkconstants, tkFileDialog, tkMessageBox
class FileZap():
def __init__(self, root):
root.title("TestGUI")
root.geometry("860x450")
self.topFrame = LabelFrame(root, text="Top Area")
self.topFrame.grid(row=1, column=1, rowspan=6, columnspan=7, padx=5, pady = 5, sticky="NSEW")
self.listbox1 = Listbox(root, width=50, selectmode="multiple")
self.listbox1.grid(row=3, column=2)
self.scrollbar = Scrollbar(orient=VERTICAL, command=self.listbox1.yview)
self.listbox1.config(yscrollcommand=self.scrollbar.set)
self.scrollbar.grid(row=3, column=3, sticky="ns")
self.listbox2 = Listbox(root, width=50)
self.listbox2.grid(row=3, column=4)
self.selectLabel = Label(root, text="Select a folder: ")
self.selectLabel.grid(row=3, column=1)
self.user1 = Entry(root, width="50")
self.user1.grid(row=2, column=2)
self.browse = Button(root, text="Browse")
self.browse.grid(row=2, column=3)
self.addItems = Button(root, text="Add to Selection")
self.addItems.grid(row=4, column=2)
self.clearItems = Button(root, text="Clear Selection")
self.clearItems.grid(row=4, column=4)
self.leftFrame = LabelFrame(root, text="Left Area")
self.leftFrame.grid(row=5, column=1, rowspan=6, columnspan=3, padx=5, pady = 5, sticky="NSEW")
self.replaceInLable = Label(root, text="String to replace: ")
self.replaceOutLable = Label(root, text="New string: ")
self.replaceInLable.grid(row=7, column=1)
self.replaceOutLable.grid(row=7, column=2)
self.replaceIn = Entry(root, width="20")
self.replaceOut = Entry(root, width="20")
self.replaceIn.grid(row=8, column=1)
self.replaceOut.grid(row=8, column=2)
self.replace = Button(root, text="Replace")
self.replace.grid(row=8,column=3)
self.rightFrame = LabelFrame(root, text="Right Area")
self.rightFrame.grid(row=5, column=4, rowspan=6, columnspan=3, padx=5, pady = 5, sticky="NSEW")
self.quit = Button(root, text="Exit", command=root.quit)
self.quit.grid(row=9, column=6)
root = Tkinter.Tk()
file_zap = FileZap(root)
root.mainloop()
I have tried various alterations but can't nail it! Any help would be much appreciated.
First, the columns / row adapt to there content so an empty one as a zero height/width. If you want to put space between your widgets use the padx and pady options in the .grid method. They can take either one number which will give the padding on both sides or a couple of numbers giving the padding on each side.
Secondly, if you want your widgets to be inside a LabelFrame, you need to create them with this LabelFrame as master instead of the main window.
from Tkinter import LabelFrame, Tk, Button, Label
root = Tk()
# make row 0 resize with the window
root.rowconfigure(0, weight=1)
# make column 0 and 1 resize with the window
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=1)
# create LabelFrames
top_frame = LabelFrame(root, text="top")
left_frame = LabelFrame(root, text="left")
right_frame = LabelFrame(root, text="right")
top_frame.grid(row=0, column=0, columnspan=2, padx=10, pady=(10,4), sticky="nsew")
left_frame.grid(row=1, column=0, padx=(10,4), pady=4, sticky="nsew")
right_frame.grid(row=1, column=1, padx=(4,10), pady=4, sticky="nsew")
#create widgets inside top_frame
Label(top_frame, text="I'm inside top_frame").pack()
Button(top_frame, text="Top").pack()
#create widgets inside left_frame
Label(left_frame, text="I'm inside left_frame").pack()
Button(left_frame, text="Left").pack()
#create widgets inside top_frame
Label(right_frame, text="I'm inside right_frame").pack()
Button(right_frame, text="Right").pack()
Button(root, text="Quit", command=root.destroy).grid(row=2, column=0,
columnspan=2, pady=10)
root.mainloop()
I am little bit comfused with grid system in tkinter Python. Can anyone show how to make it in right way?! ListBox and Label items positions are not in the places where I expexted to see them.
CODE:
self.third_label = Label(self, text="TEXT")
self.third_label.grid(row=2, column=0, columnspan=4, padx=10, pady=10, sticky=W)
self.fourth_label = Label(self, text="LONG TEXT")
self.fourth_label.grid(row=2, column=1, columnspan=4, padx=10, pady=10, sticky=W)
self.fifth_label = Label(self, text="SOME TEXT")
self.fifth_label.grid(row=2, column=2, columnspan=6, padx=10, pady=10, sticky=W)
self.sixth_label = Label(self, text="BIG TEXT")
self.sixth_label.grid(row=2, column=3, columnspan=4, padx=10, pady=10, sticky=W)
self.first_listbox = Listbox(self, width=40, selectmode=EXTENDED)
self.first_listbox.grid(row=3, column=0, columnspan=4, padx=10, pady=10, sticky=W)
self.second_listbox = Listbox(self, width=40, selectmode=EXTENDED)
self.second_listbox.grid(row=3, column=2, columnspan=4, padx=10, pady=10, sticky=W)
self.third_listbox = Listbox(self, width=40, selectmode=EXTENDED)
self.third_listbox.grid(row=3, column=4, columnspan=4, padx=10, pady=10, sticky=W)
self.fourth_listbox = Listbox(self, width=40, selectmode=EXTENDED)
self.fourth_listbox.grid(row=3, column=6, columnspan=4, padx=10, pady=10, sticky=W)
What I have right now:
Just Example:
The grid system works fine. The problem is your columnspans, which don't make much sense. You're gridding the widgets into certain column positions then giving them a columnspan that is beyond the range of where the next widget is to be gridded so on and so forth.
Small example:
import string
import tkinter as tk
root = tk.Tk()
for i in range(3):
tk.Label(root, text=string.ascii_letters).grid(row=0, column=i)
tk.Listbox(root, width=40).grid(row=1, column=i)
root.mainloop()
Edit from comments (for listbox size):
To get the number of lines in a listbox you can use the .size() method.
Image:
Dear StackOverflow community,
I am trying to get my head around programming with Python and I am having a hard time with the grid layout manager. I have been trying to find the answer myself and tried various options, but I just can't get my UI to look how I want it to.
I hope that you can help me. Unfortunately, I cannot post pictures because I am new here. But basically I wanted all the coloured buttons on the left hand side EVENLY spaced on top each other, in column 1. Then the Labels in column 2 and the text areas in column 3.
I also wanted to create a border at the bottom with the close button underneath, but this doesn't even show up at all.
Please could you give me some hints as to what I am doing wrong?
import Tkinter
from Tkinter import *
from ttk import Frame, Button, Style
class KarateSyllabus(Frame):
"""A program that displays karate grading syllabi"""
#define the constructor
def __init__(self, parent):
Frame.__init__(self, parent)
self.parent = parent
self.initUI()
#define the GUI
def initUI(self):
#define the basic parameters of the window
self.parent.title("Karate Syllabus")
self.style = Style()
self.style.theme_use("default")
#self.parent.geometry("500x500")
self.parent.config(background = "black")
self.parent.wm_iconbitmap("favicon.ico")
self.grid()
#create the buttons for the syllabus
button1 = Tkinter.Button(self, text = "White Belt", bg = "white", height=1, width =10).grid(row=0, column=0, pady=4, padx=10, sticky=N)
button2 = Tkinter.Button(self, text = "Red Belt", bg="red", height=1, width =10).grid(row=1,column=0, pady=4, padx=10, sticky=N )
button3 = Tkinter.Button(self, text = "Orange Belt",bg="orange", height=1, width =10).grid(row=2,column=0, pady=4, padx=10, sticky=N)
button4 = Tkinter.Button(self, text = "Yellow Belt",bg="yellow", height=1, width =10).grid(row=3, column=0, pady=4, padx=10, sticky=N)
button5 = Tkinter.Button(self, text = "Green Belt", bg="green", height=1, width =10).grid(row=4, column=0, pady=4, padx=10, sticky=N)
button6 = Tkinter.Button(self, text = "Purple Belt",bg="purple", height=1, width =10).grid(row=5, column=0, pady=4, padx=10, sticky=N)
button7 = Tkinter.Button(self, text = "Brown Belt", bg="brown", height=1, width =10).grid(row=6, column=0, pady=4, padx=10, sticky=N)
button8 = Tkinter.Button(self, text = "Black Belt", bg="black", foreground="white", height=1, width =10).grid(row=7, column=0, pady=2, padx=10, sticky=N)
#create the three text areas to display the text and according labels
BasicsLabel = Label(self, text="Basics:").grid(row =0, column =2)
BasicTextArea = Text(self, width=50, height=6, takefocus=0)
BasicTextArea.grid(row=0, column=3, padx=10, pady=2)
BasicTextArea.config(font =("Arial",10), bg="grey", wrap = WORD)
KataLabel = Label(self, text="Kata:").grid(row =2, column =2)
KataTextArea = Text(self, width=50, height=6, takefocus=0)
KataTextArea.grid(row=2, column=3, padx=30, pady=2)
KataTextArea.config(font =("Arial",10), bg="grey")
KumiteLabel = Label(self, text="Kumite:").grid(row =3, column =2)
KumiteTextArea = Text(self, width=50, height=6, takefocus=0)
KumiteTextArea.grid(row=3, column=3, padx=10, pady=2)
KumiteTextArea.config(font =("Arial",10), bg="grey")
#create the second frame for the bottom with the close button
frame = Frame(self, relief=RAISED, borderwidth=1)
frame.grid(row=8, column= 1)
closeButton = Button(self, text="Exit")
closeButton.grid(row = 8, column = 3)
def main():
root = Tk()
app = KarateSyllabus(root)
root.mainloop()
if __name__ == '__main__':
main()
It sounds like you don't need to be using grid, since you aren't creating a grid. It sounds like you want each column to be evenly spaced vertically, which precludes a grid-like layout.
You're creating three columns, so I would start with packing a frame along the bottom for your quit button, and then three vertical frames, packed left-to-right, all in the main window.
Next, pack the color buttons in the left-most frame, top to bottom. With the right options they will be evenly spaced (though you could also use grid if you want).
Finally, use the exact same technique for the other two columns - pack everything top-to-bottom, having each one expand to fill the area they are allotted.
You should use at least a Frame to group all the left buttons and another one for the Exit button, as in the following code:
import Tkinter
from ttk import Frame, Button, Style
class KarateSyllabus(Frame):
"""A program that displays karate grading syllabi"""
#define the constructor
def __init__(self, parent):
Frame.__init__(self, parent)
self.parent = parent
self.initUI()
#define the GUI
def initUI(self):
#define the basic parameters of the window
self.parent.title("Karate Syllabus")
self.style = Style()
self.style.theme_use("default")
#self.parent.geometry("500x500")
self.parent.config(background = "black")
self.parent.wm_iconbitmap("favicon.ico")
self.grid(sticky=Tkinter.NSEW)
button_panel = Frame(self)
#create the buttons for the syllabus
button1 = Tkinter.Button(button_panel, text="White Belt", bg="white", height=1, width =10).grid(row=0, column=0, pady=4, padx=10, sticky=Tkinter.N)
button2 = Tkinter.Button(button_panel, text="Red Belt", bg="red", height=1, width =10).grid(row=1, column=0, pady=4, padx=10, sticky=Tkinter.N)
button3 = Tkinter.Button(button_panel, text="Orange Belt", bg="orange", height=1, width =10).grid(row=2, column=0, pady=4, padx=10, sticky=Tkinter.N)
button4 = Tkinter.Button(button_panel, text="Yellow Belt", bg="yellow", height=1, width =10).grid(row=3, column=0, pady=4, padx=10, sticky=Tkinter.N)
button5 = Tkinter.Button(button_panel, text="Green Belt", bg="green", height=1, width =10).grid(row=4, column=0, pady=4, padx=10, sticky=Tkinter.N)
button6 = Tkinter.Button(button_panel, text="Purple Belt", bg="purple", height=1, width =10).grid(row=5, column=0, pady=4, padx=10, sticky=Tkinter.N)
button7 = Tkinter.Button(button_panel, text="Brown Belt", bg="brown", height=1, width =10).grid(row=6, column=0, pady=4, padx=10, sticky=Tkinter.N)
button8 = Tkinter.Button(button_panel, text="Black Belt", bg="black", height=1, width =10, foreground="white").grid(row=7, column=0, pady=2, padx=10, sticky=Tkinter.N)
button_panel.grid(row=0, column=0, rowspan=3, sticky=Tkinter.N)
#create the three text areas to display the text and according labels
BasicsLabel = Tkinter.Label(self, text="Basics:").grid(row=0, column=1, sticky=Tkinter.N)
BasicTextArea = Tkinter.Text(self, width=50, height=6, takefocus=0)
BasicTextArea.grid(row=0, column=2, padx=10, pady=2, sticky=Tkinter.NSEW)
BasicTextArea.config(font=("Arial",10), bg="grey", wrap=Tkinter.WORD)
KataLabel = Tkinter.Label(self, text="Kata:").grid(row=1, column=1, sticky=Tkinter.N)
KataTextArea = Tkinter.Text(self, width=50, height=6, takefocus=0)
KataTextArea.grid(row=1, column=2, padx=10, pady=2, sticky=Tkinter.NSEW)
KataTextArea.config(font =("Arial",10), bg="grey")
KumiteLabel = Tkinter.Label(self, text="Kumite:").grid(row=2, column=1, sticky=Tkinter.N)
KumiteTextArea = Tkinter.Text(self, width=50, height=6, takefocus=0)
KumiteTextArea.grid(row=2, column=2, padx=10, pady=2, sticky=Tkinter.NSEW)
KumiteTextArea.config(font=("Arial",10), bg="grey")
#create the second frame for the bottom with the close button
close_frame = Tkinter.Frame(self, relief=Tkinter.RAISED, borderwidth=2)
close_frame.grid(row=3, column=0, columnspan=3, sticky=Tkinter.EW)
close_frame.columnconfigure(0, weight=1)
closeButton = Tkinter.Button(close_frame, text="Exit", command=self.quit)
# Move 'Exit' to the right. Comment out next line to leave it centered.
closeButton.grid(sticky=Tkinter.E)
self.rowconfigure(0, weight=1)
self.rowconfigure(1, weight=1)
self.rowconfigure(2, weight=1)
# Leave row 3 (close_frame) non-expandable.
# Leave columns 1 and 2 (button_panel and labels) non-expandable.
self.columnconfigure(2, weight=1)
self.parent.rowconfigure(0, weight=1)
self.parent.columnconfigure(0, weight=1)
def main():
root = Tkinter.Tk()
app = KarateSyllabus(root)
root.mainloop()
if __name__ == '__main__':
main()