Getting buttons to align to the left if there's lots of widgets

Question

I had been trying to make a program. I am currently having trouble with getting all of the buttons to align to the left when I have got lots of widgets. When I use the following code, which has got lots of widgets and their various griddings on, the buttons I put don't align left, and I can't seem to find a way to make them align left.

from tkinter import *
import tkinter as tk

def banana():
    print ("Sundae")
def tomato():
    print ("Ketchup")
def potato():
    print ("Potato chips")

root = tk.Tk()
root.geometry("960x600")

label_toptitle = tk.Label(root,
                          text="Program Name",
                          font=(None, 40),
)
label_toptitle.grid(row=0,
                    columnspan=3
                    )

description = "To create rhythm, press the red record button. While recording, use the clicked note button to\n create a series of rectangle notes on screen. They can be held to extend the rectangles. \n\n Once you are done, press the red stop button to stop recording"

pixel = tk.PhotoImage(width=1, height=1)
label_desc = tk.Label(root,
                      image=pixel,
                      compound="center",
                      width=900,
                      font=(None, 14),
                      padx=20,
                      pady=10,
                      text=description
                      )
                      #bd=1,
                      #relief="solid",

#label_desc.pack(side="top", fill="both")
label_desc.grid(row=1,
                columnspan=3,
                #sticky=E
                )

canvas = Canvas(width=960, height=400, bg='white')

canvas.grid(row=2,
            column=0,
            columnspan=3,
            #expand=YES,
            #fill=BOTH
            )

canvas.create_rectangle(70, 18, 888, 208, width=5, fill='pink')
canvas.create_rectangle(257, 268, 349, 357, width=5, fill='pink')
canvas.create_rectangle(430, 268, 520, 357, width=5, fill='pink')
canvas.create_rectangle(597, 268, 689, 357, width=5, fill='pink')

gridbutt = Label(root, text="", anchor=W)
gridbutt.grid(row=3, column=0, columnspan=3)

f1 = tk.Frame(root, width=70, height=30)
f2 = tk.Frame(root, width=70, height=30)
f3 = tk.Frame(root, width=70, height=30)

f1.grid(row=3, column=0)
f2.grid(row=3, column=1)
f3.grid(row=3, column=2)

button_qwer = Button(f1, text="asdfasdf", command=banana)
button_asdf = Button(f2, text="asdfasdf", command=tomato)
button_zxcv = Button(f3, text="asdfasdf", command=potato)

button_qwer.place(x=0, y=0, relwidth=1, relheight=1)
button_asdf.place(x=0, y=0, relwidth=1, relheight=1)
button_zxcv.place(x=0, y=0, relwidth=1, relheight=1)

root.mainloop()

But when I try to put small amount of code like below, the buttons to align left as I would expect.

from tkinter import *
import tkinter as tk

root = tk.Tk()
root.geometry("960x600")

f1 = tk.Frame(root, width=70, height=30)
f2 = tk.Frame(root, width=70, height=30)
f3 = tk.Frame(root, width=70, height=30)

f1.grid(row=3, column=0)
f2.grid(row=3, column=1)
f3.grid(row=3, column=2)

button_qwer = Button(f1, text="asdfasdf")
button_asdf = Button(f2, text="asdfasdf")
button_zxcv = Button(f3, text="asdfasdf")

button_qwer.place(x=0, y=0, relwidth=1, relheight=1)
button_asdf.place(x=0, y=0, relwidth=1, relheight=1)
button_zxcv.place(x=0, y=0, relwidth=1, relheight=1)

root.mainloop()

I also attempted to anchor the buttons to the left with the "anchor" function, but it only gives an error. I did the same attempt to frames, but also with errors.

How do I get my buttons of my main program to align to the left and be bunched up towards the left nicely like the second program would do by default?

Answer 1

I see a couple of issues here. The fix for your buttons can be done a few ways. As Reblochon Masque pointed out you can use the pack() method but I prefer the grid() method.

You should remove the columnspan from your canvas as it is not needed here. You can also remove gridbutt as it appears to do nothing of value here also.

If you use 3 frames you will need not be able to group all of them to one side like that. You need to use one frame and then tell that frame to stick to left and right. Once you do that all your buttons should align to the left.

That said you also should not be import * and importing as tk. Only one is needed. The preferred method to import is import tkinter as tk. Simple use the tk. prefix when creating your widgets.

See below example code.

import tkinter as tk

def banana():
    print ("Sundae")
def tomato():
    print ("Ketchup")
def potato():
    print ("Potato chips")

root = tk.Tk()
#root.geometry("960x600")
description = "To create rhythm, press the red record button. While recording, use the clicked note button to\n create a series of rectangle notes on screen. They can be held to extend the rectangles. \n\n Once you are done, press the red stop button to stop recording"

label_toptitle = tk.Label(root,text="Program Name",font=(None, 40))
label_toptitle.grid(row=0,columnspan=3)

pixel = tk.PhotoImage(width=1, height=1)
label_desc = tk.Label(root, image=pixel, compound="center", width=900,
                      font=(None, 14), padx=20, pady=10, text=description)
label_desc.grid(row=1, columnspan=3)

canvas = tk.Canvas(width=960, height=400, bg='white')
canvas.grid(row=2, column=0)

canvas.create_rectangle(70, 18, 888, 208, width=5, fill='pink')
canvas.create_rectangle(257, 268, 349, 357, width=5, fill='pink')
canvas.create_rectangle(430, 268, 520, 357, width=5, fill='pink')
canvas.create_rectangle(597, 268, 689, 357, width=5, fill='pink')

f1 = tk.Frame(root, width=70, height=30)
f1.grid(row=3, column=0, sticky="we")

button_qwer = tk.Button(f1, text="Banana", command=banana)
button_asdf = tk.Button(f1, text="Tomato", command=tomato)
button_zxcv = tk.Button(f1, text="Potato", command=potato)

button_qwer.grid(row=0, column=0)
button_asdf.grid(row=0, column=1)
button_zxcv.grid(row=0, column=2)

root.mainloop()

Answer 2

You were placing your 3 buttons in 3 different frames, and gridding them in different columns. Here I placed all 3 buttons in a frame, packed them to the left, and gridded the single frame with 3 buttons in column 0, with a sticky option to the West.

It produces the same appearance as your second code sample.

import tkinter as tk
from tkinter import PhotoImage

def banana():
    print ("Sundae")

def tomato():
    print ("Ketchup")

def potato():
    print ("Potato chips")


root = tk.Tk()
root.geometry("960x600")

label_toptitle = tk.Label(root, text="Program Name", font=(None, 40),)
label_toptitle.grid(row=0, columnspan=3)

description = "To create rhythm, press the red record button. While recording, use the clicked note button to\n create a series of rectangle notes on screen. They can be held to extend the rectangles. \n\n Once you are done, press the red stop button to stop recording"

pixel = PhotoImage(width=1, height=1)
label_desc = tk.Label(root, image=pixel, compound="center", width=900, font=(None, 14),
                      padx=20, pady=10, text=description)

label_desc.grid(row=1, columnspan=3)

canvas = tk.Canvas(width=960, height=400, bg='white')
canvas.grid(row=2, column=0, columnspan=3)

canvas.create_rectangle(70, 18, 888, 208, width=5, fill='pink')
canvas.create_rectangle(257, 268, 349, 357, width=5, fill='pink')
canvas.create_rectangle(430, 268, 520, 357, width=5, fill='pink')
canvas.create_rectangle(597, 268, 689, 357, width=5, fill='pink')

gridbutt = tk.Label(root, text="", anchor='w')
gridbutt.grid(row=3, column=0, columnspan=3)

f1 = tk.Frame(root, width=70, height=30)
f1.grid(row=3, column=0, sticky='W')

button_qwer = tk.Button(f1, text="asdfasdf", command=banana)
button_asdf = tk.Button(f1, text="asdfasdf", command=tomato)
button_zxcv = tk.Button(f1, text="asdfasdf", command=potato)

button_qwer.pack(side='left')
button_asdf.pack(side='left')
button_zxcv.pack(side='left')

root.mainloop()