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()
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))
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))
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