CTKComboBox arrow graphic issue

[Guilherme-Mello]

So, i've been playing arround a bit with customtkinter.

While using the comboBox, o noticed an issue with the graphics as shown below:

As you can see, there is 3 white dots on the arrow. i have no idea about why this happens.

Please, can anybody help me?

[v-pun215]

I think its supposed to be part of the theme that u have applied.

[dipeshSam]

It's not an error or bug. It's part of design.

Regards.

[Guilherme-Mello]

I think its supposed to be part of the theme that u have applied.

So, i did not applied any theme, i just set the colors manually. Even if i use all colors default but keeping the sizings, i encounter these dots.

It's not an error or bug. It's part of design.

Regards.

is there any way to exchange this arrow dropdown icon for something custom?

[dipeshSam]

@Guilherme-Mello Can you have sample reproducible code? It might be helpful to clarify it.

[Guilherme-Mello]

@Guilherme-Mello Can you have sample reproducible code? It might be helpful to clarify it.

Sure!

import customtkinter as ctk
from PIL import Image as Img
from UI_Tools import *


class App(ctk.CTk):
    def __init__(self, title, size):

        # Main setup
        super().__init__()
        #ctk.set_appearance_mode("system")
        self.title(title)

        self.geometry(f'{size[0]}x{size[1]}+{int(abs((self.winfo_screenwidth()/2)-(size[0]/2)))}+{int(abs((self.winfo_screenheight()/2)-(size[1]/2)))}')
        self.minsize(size[0],size[1])
        self.maxsize(size[0],size[1])
        #Define Images:
        image_bg = Img.open("assets/frame0/AppOne.png")
        background = ctk.CTkImage(light_image=image_bg, dark_image=image_bg, size=(size))
        bg_lbl = ctk.CTkLabel(self, text="", image=background, width=size[0],height=size[1])
        bg_lbl.place(x=0, y=0)

        AppMenu(self)
        # Run
        self.mainloop()

def AppMenu(self):
    #self._fg_color = "#797979"
    Font_Audiowide15 = ctk.CTkFont(family="Audiowide", size = 15)
    Font_Audiowide10 = ctk.CTkFont(family="Audiowide", size = 10)
    DynamicButton(self, x=19,y=140,H=35,W=154, 
                  text= "Connect", 
                  font=Font_Audiowide15,
                  Tcolor="#4B00EA",
                  TcolorClick = "#0B0022",
                  TcolorHover = "#7653BF",
                  Bcolor = "#D9D9D9",
                  BcolorHover = "#D9D9D9",
                  radius = 6,
                  cmd = None,
                  bgColor= "#797979",
                )
    

    DynamicButton(self, x=188,y=99,H=35,W=241, 
                  text= "Send data", 
                  font=Font_Audiowide15,
                  Tcolor="#4B00EA",
                  TcolorClick = "#0B0022",
                  TcolorHover = "#7653BF",
                  Bcolor = "#D9D9D9",
                  BcolorHover = "#D9D9D9",
                  radius = 6,
                  cmd = None,
                  bgColor= "#797979",
                )
    

    comboboxCOM = ctk.CTkComboBox(self, 
                               values=["COM1", "COM2"],
                               command=None, 
                               variable=None,
                               width=102,
                               height=33,
                               corner_radius=5,
                               border_width=1,
                               border_color = "#FFFFFF",
                               text_color = "#000000",
                               button_color = "#D9D9D9",
                               button_hover_color = "#FFFFFF",
                               fg_color = "#D9D9D9",
                               bg_color = "#959595",
                               font= Font_Audiowide10,
                               justify=CENTER,
                               state = "readonly"
                               )
    comboboxCOM.place(x=71,y=59)


    # comboboxBAUD = ctk.CTkComboBox(self, 
    #                            values=["9600", "4800"],
    #                            command=None, 
    #                            variable=None,
    #                            width=102,
    #                            height=33,
    #                            corner_radius=5,
    #                            border_width=1,
    #                            border_color="#FFFFFF",
    #                            text_color="#000000",
    #                            button_color="#D9D9D9",
    #                            button_hover_color="#FFFFFF",
    #                            fg_color="#D9D9D9",
    #                            bg_color= "#959595",
    #                            font= Font_Audiowide10,
    #                            justify=CENTER,
    #                            state = "readonly"
    #                            )
    # comboboxBAUD.place(x=71,y=100)


    comboboxBAUD = ctk.CTkComboBox(self, 
                               values=["9600", "4800"],
                               command=None, 
                               variable=None,
                               width=102,
                               height=33,
                               corner_radius=5,
                               border_width=1,
                              #  border_color="#FFFFFF",
                              #  text_color="#000000",
                              #  button_color="#D9D9D9",
                              #  button_hover_color="#FFFFFF",
                              #  fg_color="#D9D9D9",
                              #  bg_color= "#959595",
                               font= Font_Audiowide10,
                               justify=CENTER,
                               #state = "readonly"
                               )
    comboboxBAUD.place(x=71,y=100)



    entryData = ctk.CTkEntry(self,
                             placeholder_text="Data to send",
                             width=241,
                             height=33,
                             corner_radius=5,
                             border_width=1,
                             border_color="#FFFFFF",
                             text_color="#000000",
                             fg_color="#D9D9D9",
                             bg_color= "#959595",
                             font= Font_Audiowide10
                             )
    entryData.place(x=188,y=60)


    textboxHistory = ctk.CTkTextbox(self,
                             width=410,
                             height=105,
                             corner_radius=5,
                             border_spacing=4,
                             border_width=1,
                             border_color="#FFFFFF",
                             text_color="#000000",
                             fg_color="#D9D9D9",
                             bg_color= "#959595",
                             font= Font_Audiowide10,
                             state="disable"
                             )
    textboxHistory.place(x=20,y=185)


    labelStatus = ctk.CTkLabel(self,
                               text = "Status",
                               width = 50,
                               height = 17,
                               text_color = "#000000",
                               bg_color= "#797979",
                               font = Font_Audiowide15,
                               compound = CENTER,
                               justify = CENTER
                               )
    labelStatus.place(x=284,y=149)
    

App('Luna Serial Terminal', (450,300))

The expected window for the code above is this:

[Guilherme-Mello]

@Guilherme-Mello Can you have sample reproducible code? It might be helpful to clarify it.

Sure!

import customtkinter as ctk
from PIL import Image as Img
from UI_Tools import *


class App(ctk.CTk):
    def __init__(self, title, size):

        # Main setup
        super().__init__()
        #ctk.set_appearance_mode("system")
        self.title(title)

        self.geometry(f'{size[0]}x{size[1]}+{int(abs((self.winfo_screenwidth()/2)-(size[0]/2)))}+{int(abs((self.winfo_screenheight()/2)-(size[1]/2)))}')
        self.minsize(size[0],size[1])
        self.maxsize(size[0],size[1])
        #Define Images:
        image_bg = Img.open("assets/frame0/AppOne.png")
        background = ctk.CTkImage(light_image=image_bg, dark_image=image_bg, size=(size))
        bg_lbl = ctk.CTkLabel(self, text="", image=background, width=size[0],height=size[1])
        bg_lbl.place(x=0, y=0)

        AppMenu(self)
        # Run
        self.mainloop()

def AppMenu(self):
    #self._fg_color = "#797979"
    Font_Audiowide15 = ctk.CTkFont(family="Audiowide", size = 15)
    Font_Audiowide10 = ctk.CTkFont(family="Audiowide", size = 10)
    DynamicButton(self, x=19,y=140,H=35,W=154, 
                  text= "Connect", 
                  font=Font_Audiowide15,
                  Tcolor="#4B00EA",
                  TcolorClick = "#0B0022",
                  TcolorHover = "#7653BF",
                  Bcolor = "#D9D9D9",
                  BcolorHover = "#D9D9D9",
                  radius = 6,
                  cmd = None,
                  bgColor= "#797979",
                )
    

    DynamicButton(self, x=188,y=99,H=35,W=241, 
                  text= "Send data", 
                  font=Font_Audiowide15,
                  Tcolor="#4B00EA",
                  TcolorClick = "#0B0022",
                  TcolorHover = "#7653BF",
                  Bcolor = "#D9D9D9",
                  BcolorHover = "#D9D9D9",
                  radius = 6,
                  cmd = None,
                  bgColor= "#797979",
                )
    

    comboboxCOM = ctk.CTkComboBox(self, 
                               values=["COM1", "COM2"],
                               command=None, 
                               variable=None,
                               width=102,
                               height=33,
                               corner_radius=5,
                               border_width=1,
                               border_color = "#FFFFFF",
                               text_color = "#000000",
                               button_color = "#D9D9D9",
                               button_hover_color = "#FFFFFF",
                               fg_color = "#D9D9D9",
                               bg_color = "#959595",
                               font= Font_Audiowide10,
                               justify=CENTER,
                               state = "readonly"
                               )
    comboboxCOM.place(x=71,y=59)


    # comboboxBAUD = ctk.CTkComboBox(self, 
    #                            values=["9600", "4800"],
    #                            command=None, 
    #                            variable=None,
    #                            width=102,
    #                            height=33,
    #                            corner_radius=5,
    #                            border_width=1,
    #                            border_color="#FFFFFF",
    #                            text_color="#000000",
    #                            button_color="#D9D9D9",
    #                            button_hover_color="#FFFFFF",
    #                            fg_color="#D9D9D9",
    #                            bg_color= "#959595",
    #                            font= Font_Audiowide10,
    #                            justify=CENTER,
    #                            state = "readonly"
    #                            )
    # comboboxBAUD.place(x=71,y=100)


    comboboxBAUD = ctk.CTkComboBox(self, 
                               values=["9600", "4800"],
                               command=None, 
                               variable=None,
                               width=102,
                               height=33,
                               corner_radius=5,
                               border_width=1,
                              #  border_color="#FFFFFF",
                              #  text_color="#000000",
                              #  button_color="#D9D9D9",
                              #  button_hover_color="#FFFFFF",
                              #  fg_color="#D9D9D9",
                              #  bg_color= "#959595",
                               font= Font_Audiowide10,
                               justify=CENTER,
                               #state = "readonly"
                               )
    comboboxBAUD.place(x=71,y=100)



    entryData = ctk.CTkEntry(self,
                             placeholder_text="Data to send",
                             width=241,
                             height=33,
                             corner_radius=5,
                             border_width=1,
                             border_color="#FFFFFF",
                             text_color="#000000",
                             fg_color="#D9D9D9",
                             bg_color= "#959595",
                             font= Font_Audiowide10
                             )
    entryData.place(x=188,y=60)


    textboxHistory = ctk.CTkTextbox(self,
                             width=410,
                             height=105,
                             corner_radius=5,
                             border_spacing=4,
                             border_width=1,
                             border_color="#FFFFFF",
                             text_color="#000000",
                             fg_color="#D9D9D9",
                             bg_color= "#959595",
                             font= Font_Audiowide10,
                             state="disable"
                             )
    textboxHistory.place(x=20,y=185)


    labelStatus = ctk.CTkLabel(self,
                               text = "Status",
                               width = 50,
                               height = 17,
                               text_color = "#000000",
                               bg_color= "#797979",
                               font = Font_Audiowide15,
                               compound = CENTER,
                               justify = CENTER
                               )
    labelStatus.place(x=284,y=149)
    

App('Luna Serial Terminal', (450,300))

The expected window for the code above is this:

The design i'm planning to implement is this:

Above is a printscreen from my figma project, of course, the comboBoxes has its own design, no problem, but the white dots on the arrows is really annoying. Hope somebody can help me.

[dipeshSam]

Currently there is no built in handle available to customize this problem in CustomTkinter. @TomSchimansky should take a look into this matter.

Regards.

[MuzzyGH]

@Guilherme-Mello This is another scaling issue with customtkinter. The arrows will only look good if Windows screen scaling is set to 100%. I guess yours is higher.