Skip to content
Advertisement

How to align radio buttons in adjacent rows tkinter?

I’m making a GUI in Python tkinter. How can I align these Raidobuttons so that they all line up in one column and the columns are side by side. In particular I’d like my columns to be left right and center but now this is how they are showing up now:

enter image description here

This is my code for the radio buttons:

selected_device = StringVar()
devices = ['CAN', 'US', 'EU', 'AU']

for device in devices:
    r = Radiobutton(
        root,
        text=device,
        value=device,
        variable=selected_device
    )
    r.pack(anchor="ne")

selected_source = StringVar()
sources = ['Raw Data', 'Encoded Data']

for source in sources:
    r = Radiobutton(
        root,
        text=source,
        value=source,
        variable=selected_source
    )
    r.pack(anchor="nw")

selected_environment = StringVar()
environments = ['Sprint', 'RC', 'Staging']

for environment in environments:
    r = Radiobutton(
        root,
        text=environment,
        value=environment,
        variable=selected_environment
    )
    r.pack(anchor="n")

Advertisement

Answer

I’d like my columns to be left right and center but now this is how they are showing up now:

If that is the case, and you want to continue to use pack, the easiest solution is to create three frames, one for the left, one for the right, and one for the center. That, or switch to using grid with three columns.

Using pack

Create three frames, and also use anchor="w" to get the buttons to be aligned to the left of the frame.

left_frame = Frame(root)
middle_frame = Frame(root)
right_frame = Frame(root)

left_frame.pack(side="left", fill="both", expand=True)
middle_frame.pack(side="left", fill="both", expand=True)
right_frame.pack(side="right", fill="both", expand=True)

for device in devices:
    r = Radiobutton(right_frame, ...)
    r.pack(side="top", anchor="w")
...
for source in sources:
    r = Radiobutton(left_frame, ...)
    r.pack(side="top", anchor="w")
...
for environment in environments:
    r = Radiobutton(middle_frame, ...)
    r.pack(side="top", anchor="w")

Using grid

Since you are wanting to create a three-column layout, grid may be the better choice. The key is to give the same weight to all three columns so that extra space is distributed equally. You can also use the uniform option to make sure they all are exactly the same width.

In this case, I recommend a single frame just for the radiobuttons so that their layout is independent of the rest of your UI.

radio_frame = Frame(root)
radio_frame.pack(side="top", fill="both", expand=True)
radio_frame.grid_columnconfigure((0,1,2), weight=1, uniform="equal")

for row, device in enumerate(devices):
    r = Radiobutton(radio_frame, ...)
    r.grid(row=row, column=0, sticky="w")
...
for row, source in enumerate(sources):
    r = Radiobutton(radio_frame, ...)
    r.grid(row=row, column=1, sticky="w")
...
for row, environment in enumerate(environments):
    r = Radiobutton(radio_frame, ...)
    r.grid(row=row, column=2, sticky="w")
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement