Remove spacing between image buttons

[DimaTepliakov]

Hi everybody,

I am trying to create a screen where there are 6 images where 4 of them are buttons. Unfortunately, in the images that are buttons, there is a certain space between the other buttons and the images that I can't get rid of. This is my goal:

This is what I manage to get:

Code sample:

class CarSeatSelector(ctk.CTkToplevel):

    def __init__(self, parent):
        super().__init__(parent)
        self.grid_columnconfigure(2, weight=1)

        self.images_dir = path.join(path.dirname(path.realpath(__file__)), "assets")
        self.image_loader = ImageLoader(self.images_dir)

        self.create_widgets()
    
    def create_widgets(self):

        self.select_seat_label = ctk.CTkLabel(self, text="Select your seat position:", font=roboto_bold(26), compound="center")
        self.select_seat_label.grid(row=0, column=0, columnspan=2, pady=20, sticky="ew")

        # Front
        self.car_front_label = ctk.CTkLabel(self, text="", image=self.image_loader.car_front)
        self.car_front_label.grid(row=1, column=0, columnspan=2)

        # Seats
        self.car_driver_button = ctk.CTkButton(self, text="", image=self.image_loader.car_driver, fg_color="transparent", border_width=0, border_spacing=0, anchor="left")
        self.car_driver_button.grid(row=2, column=0, padx=0, pady=0)

        self.car_front_pass_button = ctk.CTkButton(self, text="", image=self.image_loader.car_front_pass, fg_color="transparent", border_width=0, border_spacing=0, anchor="left")
        self.car_front_pass_button.grid(row=2, column=1, padx=0, pady=0)

        self.car_rear_left_pass_button = ctk.CTkButton(self, text="", image=self.image_loader.car_rear_left_pass, fg_color="transparent", border_width=0, border_spacing=0, anchor="left")
        self.car_rear_left_pass_button.grid(row=3, column=0, padx=0, pady=0)

        self.car_rear_right_pass_button = ctk.CTkButton(self, text="", image=self.image_loader.car_rear_right_pass, fg_color="transparent", border_width=0, border_spacing=0, anchor="left")
        self.car_rear_right_pass_button.grid(row=3, column=1, padx=0, pady=0)

        # Back
        self.car_back_label = ctk.CTkLabel(self, text="", image=self.image_loader.car_back)
        self.car_back_label.grid(row=4, column=0, columnspan=2)

Any ideas?

Thanks in advance.

[Akascape]

@DimaTepliakov I recommend using a label instead of button. Then binding the command to it, like this:

import customtkinter
from PIL import Image

def command():
    label_button.configure(fg_color=select_color) # change label color
    # do other operations...

root = customtkinter.CTk()

select_color = customtkinter.ThemeManager.theme["CTkButton"]["fg_color"]

image = customtkinter.CTkImage(Image.open("image.png"), size=(500,500))
label_button = customtkinter.CTkLabel(root, image=image, text="", corner_radius=10, width=400)
label_button._label.grid_configure(padx=(50,0)) # adjust padx if required

label_button.bind("<Button-1>", lambda event: command()) # bind command
label_button.pack(padx=10, pady=10)

root.mainloop()

[DimaTepliakov]

Thanks a lot, it does remove the spaces between the images.