how can i work with grids and layouts in tkinter and ctk

Question

so i was learning the ctk module and reached a dead end i searched so much for this and i didnt get a awnser heres my question: how can i stick the search button to the entry and make other things look better, my code:

from customtkinter import *
from PIL import Image
from PyDictionary import PyDictionary
import pyttsx3
from tkinter import messagebox

audio_dictionary = CTk()
engine = pyttsx3.init()


info_lbl = CTkLabel(audio_dictionary, text="   TajDictionary", font=("Agency FB", 60))
info_lbl.grid(column=0, row=0)


entry = CTkEntry(audio_dictionary, placeholder_text="Write the word: ", border_color="#1F6AA5", width=300, height=35)
entry.grid(column=0, row=1)


def search():
    if ' ' in entry.get():
        if entry.get()[-1] == ' ':
            text_box.delete(1.0, END)
            result = PyDictionary().meaning(entry.get())
            text_box.insert(1.0, f"{entry.get()}: {result}")
        else:
            messagebox.showerror("ERROR", "Only one letter")
    elif any(char.isdigit() for char in entry.get()):
        messagebox.showerror("ERROR", "Only letters")
    elif entry.get() == "" or entry.get() == " ":
        messagebox.showerror("ERROR", "The box is empty")
    else:
        text_box.delete(1.0, END)
        result = PyDictionary().meaning(entry.get())
        text_box.insert(1.0, f"{entry.get()}: {result}")


img1 = Image.open("search_magnifier.png")
search_btn = CTkButton(audio_dictionary, text="", width=30, height=35, image=CTkImage(dark_image=img1), command=search)
search_btn.grid(column=1, row=1)


def speech():
    engine.say(entry.get())
    engine.runAndWait()


img2 = Image.open("speaker.png")
audio_btn = CTkButton(audio_dictionary, text="", image=CTkImage(dark_image=img2), width=10, height=35, command=speech)
audio_btn.grid(column=0, row=2)


def clear():
    entry.delete(0, END)


clear = CTkButton(audio_dictionary, text="Clear", command=clear, text_color="black")
clear.grid(column=1, row=2)

text_box = CTkTextbox(audio_dictionary, width=400, height=300, font=("arial", 20))
text_box.grid(column=0, row=3)


audio_dictionary.mainloop()

i tried the grids, sides of pack, pady but i didn't get any satisfying result

Answer 1

To make your app more clear and organized, you should use frames.

A frame is a widget containing other widgets.

So in your case here, you could put the search button and the entry in the same frame so they stay together, and then pack / grid / place the frame to the window.

Here is an example of how a frame works:

from customtkinter import *

window = CTk()
window.geometry("300x300")

frame = CTkFrame(window)

entry_in_frame = CTkEntry(frame)
entry_in_frame.pack(side="right")
button_in_frame = CTkButton(frame, text="I'm in the frame")
button_in_frame.pack(side="left")

frame.pack(side="top")

button_not_in_frame = CTkButton(window, text="I'm not in the frame")
button_not_in_frame.pack(side="bottom")

window.mainloop()

In this example, I created a frame containing an entry and a button and another button not in the frame.

Frames have a different background color, if you want to make it the same as the window's background, you can change the frame creation line to frame = CTkFrame(window, fg_color="transparent")

If you need more informations on frames, check the documentation at https://customtkinter.tomschimansky.com/documentation/widgets/frame or add a comment on my answer.

Hope I helped you, have a nice day.