I have some buttons in customtkinter and they are not moving when I change position how would I achive my end result?

Question

So I've been working on this random selector. I am trying to move the buttons to the positions I want them, but for some reason they are not moving. This is the code:

import random

import customtkinter
import PIL
from PIL import Image

customtkinter.set_appearance_mode("light")

# Create a list to track the names that have already been chosen
chosen_names = []


def button_callback():
    # Create a list of names
    names = ["Alvaro jesus mota reto","hernado abada treiton","Jualian gabriel rendon maraya"]    # Randomly select a name from the list
    name = random.choice(names)

    # Check if the name has already been chosen
    while name in chosen_names:
        name = random.choice(names)

    # Add the name to the list of chosen names
    chosen_names.append(name)

    # Get the label
    # label = app.winfo_children()[0]
    # Update the label text
    label.configure(text=name,font=("Roboto",30))
    #label.grid_remove()

    # Check if all the values in the list have been selected
    if len(chosen_names) == len(names):
        chosen_names.clear()
        label.configure(text="")

def reset_callback():
    chosen_names.clear()
    label.configure(text="")

app = customtkinter.CTk()

image = PIL.Image.open("imagen.png")
background_image = customtkinter.CTkImage(image, size=(1280, 800))

app.title("app")
app.iconbitmap('isologo.ico')
app.geometry("1280x800")


def bg_resizer(e):
    if e.widget is app:
        i = customtkinter.CTkImage(image, size=(e.width, e.height))
        bg_lbl.configure(text="", image=i)


# Create a bg label
bg_lbl = customtkinter.CTkLabel(app, text="", image=background_image)
bg_lbl.place(x=0, y=0)

# Create a label
label = customtkinter.CTkLabel(app, text="")
label.grid(row=0, column=0, padx=20, pady=20)

button = customtkinter.CTkButton(app, text=" ", command=button_callback, hover_color='#8DBCBB',fg_color = '#F8E5BE')
button.grid(row=1,column=0,ipadx=40, ipady=30, padx=20, pady=20)

reset_button = customtkinter.CTkButton(app, text="Reiniciar", command=reset_callback,hover_color='#8DBCBB',fg_color = '#17223B')
reset_button.configure(width=5)
reset_button.grid(row=0, column=9,padx=0,pady=0)

app.bind("<Configure>", bg_resizer)
app.mainloop()

I get a window that looks like this but the buttons and label shouldnt be there

I would like the interface to look like this but I haven't been able to make it happen

The top text is the name generated at random; the reiniciar button is the one that is dark blue and the button with no text is the yellow button. If anybody knows how to do this because I haven't been able to do it, my buttons also jump all over depending on the size of the text that is displayed on the top.

Answer 1

Here is updated version of the code (I've added sticky= parameters to widgets and grid_rowconfigure/grid_columnconfigure to update the sizes when app is resizing:

import random

import customtkinter
import PIL
from PIL import Image

customtkinter.set_appearance_mode("light")

# Create a list to track the names that have already been chosen
chosen_names = []


def button_callback():
    # Create a list of names
    names = [
        "Alvaro jesus mota reto",
        "hernado abada treiton",
        "Jualian gabriel rendon maraya",
    ]  # Randomly select a name from the list
    name = random.choice(names)

    # Check if the name has already been chosen
    while name in chosen_names:
        name = random.choice(names)

    # Add the name to the list of chosen names
    chosen_names.append(name)

    # Get the label
    # label = app.winfo_children()[0]
    # Update the label text
    label.configure(text=name, font=("Roboto", 30))
    # label.grid_remove()

    # Check if all the values in the list have been selected
    if len(chosen_names) == len(names):
        chosen_names.clear()
        label.configure(text="")


def reset_callback():
    chosen_names.clear()
    label.configure(text="")


app = customtkinter.CTk()

image = PIL.Image.open("python.png")

app.title("app")
# app.iconbitmap("isologo.ico")
app.geometry("1280x800")


def bg_resizer(e):
    if e.widget is app:
        i = customtkinter.CTkImage(image, size=(e.width, e.height))
        bg_lbl.configure(text="", image=i)


# Create a bg label
bg_lbl = customtkinter.CTkLabel(app, text="")
bg_lbl.place(x=0, y=0)

# Create a label
label = customtkinter.CTkLabel(app, text="")
label.grid(row=0, column=0, padx=20, pady=20, sticky="n")

button = customtkinter.CTkButton(
    app, text=" ", command=button_callback, hover_color="#8DBCBB", fg_color="#F8E5BE"
)
button.grid(row=1, column=0, ipadx=40, ipady=30, padx=20, pady=20)

reset_button = customtkinter.CTkButton(
    app,
    text="Reiniciar",
    command=reset_callback,
    hover_color="#8DBCBB",
    fg_color="#17223B",
)
reset_button.configure(width=5)
reset_button.grid(row=0, column=1, pady=20, padx=20, sticky="ne")

app.grid_rowconfigure(0, weight=1)
app.grid_columnconfigure(0, weight=1)

app.bind("<Configure>", bg_resizer)
app.mainloop()

Creates this window: