TomSchimansky / CustomTkinter

A modern and customizable python UI-library based on Tkinter
MIT License
11.64k stars 1.09k forks source link

[minor bug] Unexpected Button Resize #2555

Open MicheleRoss opened 3 months ago

MicheleRoss commented 3 months ago

Description When restyling a button, the size changes unexpectedly when "corner_radius" is involved.

Example Button creation: btn1 = tk.CTkButton(root, text="C# m", command=lambda: selection(btn1), fg_color=["#f4f6f6", "#0f1c23"], text_color=["#abc0c9", "#545e64"], hover_color=["#dbe5e5", "#11333e"], width=107, height=58, corner_radius=45, font = ("Arial", 17))

image

Button restyling: btn.configure(fg_color=["#c3d5d5", "#184f5c"], text_color=["#0f3b56", "#e8e8e8"], hover_color=["#dbe5e5", "#11333e"], width=107, height=58, corner_radius=45, font = ("Arial", 17))

image

Notice how the button in the second image is significantly larger. After the restyle, we get a size of 140x58 (vs expected of 107x58 as per the assigned attributes).

I noticed this issue seems conditional to the reassignment of the corner_radius, as its presence alone causes the width to change. btn.configure(corner_radius=45)

Conversely, its absence prevents the issue from happening: btn.configure(fg_color=["#c3d5d5", "#184f5c"], text_color=["#0f3b56", "#e8e8e8"], hover_color=["#dbe5e5", "#11333e"], width=107, height=58, font = ("Arial", 17))

Furthermore, the issue also seems somehow related to the text length. In this case, if the button text is only 1 character (ex. text="C"), the issue does not happen. It almost seems as if the restyling adds a padding to the text and the button widens on order to contain it.

Relevance In my use case it was relevant because I created an external style.py document with all the stylings for my widgets. Therefore, I would create a selectable button as active/inactive using the corresponding style, which contained all the shape-related attributes, and reassigned the style upon click of the button.

I realize there are multiple workarounds such as creating separate shape and color/text related styles and reassign only the relevant ones from time to time. However, when someone isn't aware of the issue, it might still take some time to figure out why the GUI is not working as expected.

System Info Customtkinter Version: 5.2.2 Python 3.10.12 tested in VSCode with WSL and in Windows 10

Minimal code for replicating the issue

import customtkinter as tk

def main():
    MyGUI()

class MyGUI:

    def __init__(self):
        tk.set_appearance_mode("light")

        root = tk.CTk(fg_color=["#fefdfb", "#0d1416"])
        root.title('Bug testing')
        root.geometry("600x300")

        # Boolean value to determine if button is switched on or off
        self.btn_value = tk.BooleanVar(value=False)

        # Create a button that on click triggers the selection function
        btn = tk.CTkButton(root, text="C# m", command=lambda: selection(btn), fg_color=["#f4f6f6", "#0f1c23"], text_color=["#abc0c9", "#545e64"], hover_color=["#dbe5e5", "#11333e"], width=107, height=58, corner_radius=45, font = ("Arial", 17))
        btn.place(rely=0.403, relx=0.410)

        # detects state (boolean) and changes button appearance and state accordingly
        def selection(btn):
            if self.btn_value.get():
                self.btn_value.set(False)
                btn.configure(fg_color=["#f4f6f6", "#0f1c23"], text_color=["#abc0c9", "#545e64"], hover_color=["#dbe5e5", "#11333e"], width=107, height=58, corner_radius=45, font = ("Arial", 17))

            else:
                self.btn_value.set(True)
                btn.configure(fg_color=["#c3d5d5", "#184f5c"], text_color=["#0f3b56", "#e8e8e8"], hover_color=["#dbe5e5", "#11333e"], width=107, height=58, corner_radius=45, font = ("Arial", 17))

        root.mainloop()

if __name__ == "__main__":
    main()