Center align a group of widgets in a frame

Question

If there's a single widget in a frame's row, I can align it to any side with sticky=, or center align by omitting sticky.

However, when there are multiple columns in a row, objects in them end up left-aligned:

while I wish for them to stay in the center (while maintaining size).

Code excerpt:

from Tkinter import N,W,S,E,Tk
import ttk
import Tkinter as tkinter

root = Tk()
mainframe = ttk.Frame(root)
mainframe.grid(column=0, row=0, sticky=(N, W, E, S))
mainframe.columnconfigure(0, weight=1)
mainframe.rowconfigure(0, weight=1)

tv_town_fr = ttk.Frame(mainframe)
tv_town_fr.grid(row=3, sticky=(W,E))

tv_town_add = ttk.Button(tv_town_fr,text="+",width=4)
tv_town_add.grid(row=1,column=1)
tv_town_edit = ttk.Button(tv_town_fr,text="*",width=4)
tv_town_edit.grid(row=1,column=2)
tv_town_del = ttk.Button(tv_town_fr,text="-",width=4)
tv_town_del.grid(row=1,column=3)
tv_town_up = ttk.Button(tv_town_fr,text=u"↑",width=4)
tv_town_up.grid(row=1,column=4)
tv_town_down = ttk.Button(tv_town_fr,text=u"↓",width=4)
tv_town_down.grid(row=1,column=5)

tv_query_fr = ttk.Frame(mainframe)
tv_query_fr.grid(row=6, sticky=(W,E))

tv_query_add = ttk.Button(tv_query_fr,text="+",width=5)
tv_query_add.grid(row=1,column=1)
tv_query_edit = ttk.Button(tv_query_fr,text="*",width=5)
tv_query_edit.grid(row=1,column=2)
tv_query_del = ttk.Button(tv_query_fr,text="-",width=5)
tv_query_del.grid(row=1,column=3)
tv_query_up = ttk.Button(tv_query_fr,text=u"↑",width=5)
tv_query_up.grid(row=1,column=4)
tv_query_down = ttk.Button(tv_query_fr,text=u"↓",width=5)
tv_query_down.grid(row=1,column=5)

I don't think we need code that creates 10 buttons to reproduce this problem. Two or three would be sufficient. — Bryan Oakley, Feb 22 '18 at 15:19
@BryanOakley I don't know how to explicitly set frame to be wider than the buttons (`Frame(width=)` had no effect). So left 2 rows of them for the example. — ivan_pozdeev, Feb 22 '18 at 15:26

score 8 · Accepted Answer · answered Feb 22 '18 at 18:23

8

The simplest solution for horizontally centering a group of widgets when using grid is to create an empty column to to the left and right of all of the visible items, and then give those columns a weight so that all extra space is allocated to the empty columns.

Example

import Tkinter as tk

root = tk.Tk()
root.geometry("400x200")

label = tk.Label(root, text="Hello, world")
buttons = tk.Frame(root)
label.pack(side="top", fill="both", expand=True)
buttons.pack(side="bottom", fill="x")

b1 = tk.Button(buttons, text="one")
b2 = tk.Button(buttons, text="two")
b3 = tk.Button(buttons, text="three")

b1.grid(row=0, column=1)
b2.grid(row=0, column=2)
b3.grid(row=0, column=3)

# give empty columns a weight so that the consume
# all extra space
buttons.grid_columnconfigure(0, weight=1)
buttons.grid_columnconfigure(4, weight=1)

root.mainloop()

answered Feb 22 '18 at 18:23

Bryan Oakley

370,779
53
539
685

So, I can create an empty column by calling `grid_columnconfigure`? http://www.tkdocs.com/tutorial/grid.html seems to imply that column numbers without any widgets are simply ignored. – ivan_pozdeev Feb 22 '18 at 18:41
3

@ivan_pozdeev: empty columns aren't ignored. It's just that the default settings for empty rows and columns cause them to have no effect on the layout. – Bryan Oakley Feb 22 '18 at 20:40
i though that we cannot use pack and grid in same script – ghost21blade Dec 13 '21 at 13:25
1

@ghost21blade: you can use them both in the same script, you can't use them both on widgets that have the same parent. – Bryan Oakley Dec 13 '21 at 14:56
Oh , thats why i cannot use pack & grid . i used it in same parent – ghost21blade Dec 14 '21 at 06:22

Center align a group of widgets in a frame

1 Answers1

Example

Linked

Related