Aligning entries/buttons with tkinter-CodePudding

I've been trying to align the entries and buttons on this password manager I built for a while now but haven't been able to find a solution that works.

I tried changing the width, columnspan, and coordinates but it doesn't seem to work. I want the password entry to be aligned just like the other two but with a lower width so that the generate button does not go over. I also want the add button to be aligned equally with the row and column.

window = Tk()
window.title("Password Manager")
window.config(padx=50, pady=50)

canvas = Canvas(width=200, height=200)

my_pass_img = PhotoImage(file="logo.png")
canvas.create_image(100, 100, image=my_pass_img)
canvas.grid(column=1, row=0)

web_label = Label(text="Website:", fg="black")
web_label.grid(row=1, column=0)

user_label = Label(text="Email/Username:", fg="black")
user_label.grid(row=2, column=0)

pass_label = Label(text="Password:", fg="black")
pass_label.grid(row=3, column=0)

web_entry = Entry(width=35)
web_entry.grid(row=1, column=1, columnspan=2)
web_entry.focus()

user_entry = Entry(width=35)
user_entry.grid(row=2, column=1, columnspan=2)
user_entry.insert(0, "[email protected]")

pass_entry = Entry(width=30)
pass_entry.grid(row=3, column=1)

generate_button = Button(text="Generate Password", fg="black", command=generate_password)
generate_button.grid(row=3, column=2)

add_button = Button(width=36, text="Add", fg="black", command=save)
add_button.grid(row=4, column=1, columnspan=2)

window.mainloop()

CodePudding user response：

Grid

When using grid to setup your widgets, the entire window is divided into individual cells based on the number of columns and rows you've specified. Although you can control the individual sizes of widgets, the overall size it can take will be limited by your choice of column- and rowwidth, as well as column- and rowspan.

Sticky

You can use the sticky attribute in grid to set the side of the column you want your widgets to 'stick' to.

The stickiness is set by choosing one of the 8 directions on a compass:

N (north): stick to top of cell
S (south): bottom
E (east): right
W (west): left
NW, NE, SW, SE: top-left, top-right, bottom-left, bottom-right corners respectively.

There are also two bonus stickiness options:

NS: stretch your widget from top to bottom of the sell, but keep it centered horizontally
EW: stretch from left to right of the cell, but centered vertically.

Padding

To increase legibility, you can add padding above and below, and to the sides, of your widgets using the padx and pady attributes (measured in pixels).

So if you set stickyness to "W" with a horizontal padding padx=5, the widget position is offset from the cell boundary by 5 pixels.

Combining it in your example

To align the entries, set their sticky attribute to "W", or tk.W, to algin on left side of cell.

If you want to align labels on the right set sticky="E".

You can reduce the columnspan too of the entries, if you don't need them to be extra large. The resulting changes to grid are thus:

canvas.grid(column=1, row=0)

# Label widgets: set sticky to 'East' 
web_label.grid(row=1, column=0, sticky='E')
user_label.grid(row=2, column=0, sticky='E')
pass_label.grid(row=3, column=0, sticky='E')

# Entry widgets
web_entry.grid(row=1, column=1, columnspan=1, sticky='WE')
user_entry.grid(row=2, column=1, columnspan=1, sticky=tk.EW) # Note flag is available as tkinter attribute

# Password entry: align on left-hand side
pass_entry.grid(row=3, column=1, sticky='W')

# Align button to right side of 3rd column
generate_button.grid(row=3, column=2,sticky='E')

# Can either align in middle column...
add_button.grid(row=4, column=1, columnspan=1, sticky="WE")
#... or in middle of page
add_button.grid(row=4, column=0, columnspan=3, sticky="WE")

Bonus

Apply padding (or sticky) to all widgets in a frame or window:

for child in window.winfo_children():
    child.grid_configure(padx=3, pady=3)
    # child.grid_configure(sticky='W')

CodePudding user response：

You can use sticky option to put the widget in a grid cell at "n" (north), "s" (south), "e" (east) and "w" (west). If not specify, it is by default is "" which will put the widget at the center of the cell.

For your case, add sticky="w" to all the labels and entries, and sticky="e" to the "Add" button:

from tkinter import *

def generate_password():
    pass

def save():
    pass

window = Tk()
window.title("Password Manager")
window.config(padx=50, pady=50)

canvas = Canvas(window, width=200, height=200)

my_pass_img = PhotoImage(file="logo.png")
canvas.create_image(100, 100, image=my_pass_img)
canvas.grid(column=1, row=0)

web_label = Label(window, text="Website:", fg="black")
web_label.grid(row=1, column=0, sticky="w")

user_label = Label(window, text="Email/Username:", fg="black")
user_label.grid(row=2, column=0, sticky="w")

pass_label = Label(window, text="Password:", fg="black")
pass_label.grid(row=3, column=0, sticky="w")

web_entry = Entry(window, width=35)
web_entry.grid(row=1, column=1, columnspan=2, sticky="w")
web_entry.focus()

user_entry = Entry(window, width=35)
user_entry.grid(row=2, column=1, columnspan=2, sticky="w")
user_entry.insert(0, "[email protected]")

pass_entry = Entry(window, width=30)
pass_entry.grid(row=3, column=1, sticky="w")

generate_button = Button(window, text="Generate Password", fg="black", command=generate_password)
generate_button.grid(row=3, column=2)

add_button = Button(window, width=36, text="Add", fg="black", command=save)
add_button.grid(row=4, column=1, columnspan=2, sticky="e")

window.mainloop()

Result:

You can play around with different values or combinations of them of the sticky option to see the different effects.

Note also that it is better to specify the parent of those widgets.