Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[minor bug] Unexpected Button Resize #2555

Open
MicheleRoss opened this issue Aug 28, 2024 · 0 comments
Open

[minor bug] Unexpected Button Resize #2555

MicheleRoss opened this issue Aug 28, 2024 · 0 comments

Comments

@MicheleRoss
Copy link

MicheleRoss commented Aug 28, 2024

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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant