search

TomSchimansky / CustomTkinter

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

Switch does not go to the required position #2370

Open IAMATP opened 2 months ago

IAMATP commented 2 months ago

This is my code and I want the switch to come to the west of the frame. If I use switch.grid(column=0), then it goes behind the Frame. Please help me.

from customtkinter import *

def UpdateScreen(Machine):
    onStatus = False
    if onStatus:
        toggleButton.configure(text="Turn off")
    else:
        toggleButton.configure(text="Turn on")

def Data(Machine):
    Machine1.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine2.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine3.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine4.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine5.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine6.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine7.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine8.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine9.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine.configure(fg_color="#FFF", hover=False, text_color="#1d171b", border_width=1, border_color="#f9ba32")

    UpdateScreen(Machine)

Window = CTk()
Window.title("Advertent Connections")

Width = Window.winfo_screenwidth()
Height = Window.winfo_screenheight()
Geometry = str(Width) + "x" + str(Height)
Window.geometry(Geometry)

Window.grid_columnconfigure(0, weight=1)

set_appearance_mode("dark")

Header = CTkLabel(master=Window, text="Connections", font=("Century Gothic", 35), text_color="#E2E8E4", padx=15, pady=15)
Header.grid(column=0, row=0)

SpaceWidth = Width - 50
SpaceHeight = Height - 160

'Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar'
MachineListFrame = CTkFrame(master=Window, width=150, height=SpaceHeight, border_width=2)
MachineListFrame.grid_propagate(False)
MachineListFrame.grid(sticky="nsw", padx=50, pady=(0,50))

MachineLabel = CTkLabel(master=MachineListFrame, text="Machine List", font=("", 18), pady=5)
MachineLabel.grid(sticky="ew")

Machine1 = CTkButton(master=MachineListFrame, text="Machine 1", anchor="w", command=lambda: Data(Machine1), width=150, corner_radius=32)
Machine1.grid()

Machine2 = CTkButton(master=MachineListFrame, text="Machine 2", anchor="w", command=lambda: Data(Machine2), width=150, corner_radius=32)
Machine2.grid()

Machine3 = CTkButton(master=MachineListFrame, text="Machine 3", anchor="w", command=lambda: Data(Machine3), width=150, corner_radius=32)
Machine3.grid()

Machine4 = CTkButton(master=MachineListFrame, text="Machine 4", anchor="w", command=lambda: Data(Machine4), width=150, corner_radius=32)
Machine4.grid()

Machine5 = CTkButton(master=MachineListFrame, text="Machine 5", anchor="w", command=lambda: Data(Machine5), width=150, corner_radius=32)
Machine5.grid()

Machine6 = CTkButton(master=MachineListFrame, text="Machine 6", anchor="w", command=lambda: Data(Machine6), width=150, corner_radius=32)
Machine6.grid()

Machine7 = CTkButton(master=MachineListFrame, text="Machine 7", anchor="w", command=lambda: Data(Machine7), width=150, corner_radius=32)
Machine7.grid()

Machine8 = CTkButton(master=MachineListFrame, text="Machine 8", anchor="w", command=lambda: Data(Machine8), width=150, corner_radius=32)
Machine8.grid()

Machine9 = CTkButton(master=MachineListFrame, text="Machine 9", anchor="w", command=lambda: Data(Machine9), width=150, corner_radius=32)
Machine9.grid()

'Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data'
toggleButton = CTkSwitch(master=Window, text="Test")
toggleButton.grid(column=1,row=1, sticky="nw")

'Set Set Set Set Set Set Set Set Set Set Set Set Set Set Set Set'
Data(Machine1)

Window.mainloop()
rigvedmaanas commented 2 months ago

Hi @IAMATP,

You should bring the switch before MachineListFrame and change the column from 1 to 0.

This is the whole code

from customtkinter import *

def UpdateScreen(Machine):
    onStatus = False
    if onStatus:
        toggleButton.configure(text="Turn off")
    else:
        toggleButton.configure(text="Turn on")

def Data(Machine):
    Machine1.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine2.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine3.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine4.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine5.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine6.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine7.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine8.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine9.configure(fg_color="transparent", hover=True, text_color="#E2E8E4", hover_color="#888", border_width=0)
    Machine.configure(fg_color="#FFF", hover=False, text_color="#1d171b", border_width=1, border_color="#f9ba32")

    UpdateScreen(Machine)

Window = CTk()
Window.title("Advertent Connections")

Width = Window.winfo_screenwidth()
Height = Window.winfo_screenheight()
Geometry = str(Width) + "x" + str(Height)
Window.geometry(Geometry)

Window.grid_columnconfigure(0, weight=1)

set_appearance_mode("dark")

Header = CTkLabel(master=Window, text="Connections", font=("Century Gothic", 35), text_color="#E2E8E4", padx=15,
                  pady=15)
Header.grid(column=0, row=0)

SpaceWidth = Width - 50
SpaceHeight = Height - 160

toggleButton = CTkSwitch(master=Window, text="Test")
toggleButton.grid(column=0, row=1, sticky="nw", padx=50)

'Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar Side Bar'
MachineListFrame = CTkFrame(master=Window, width=150, height=SpaceHeight, border_width=2)
MachineListFrame.grid_propagate(False)
MachineListFrame.grid(sticky="nsw", padx=50, pady=(0, 50))

MachineLabel = CTkLabel(master=MachineListFrame, text="Machine List", font=("", 18), pady=5)
MachineLabel.grid(sticky="ew")

Machine1 = CTkButton(master=MachineListFrame, text="Machine 1", anchor="w", command=lambda: Data(Machine1), width=150,
                     corner_radius=32)
Machine1.grid()

Machine2 = CTkButton(master=MachineListFrame, text="Machine 2", anchor="w", command=lambda: Data(Machine2), width=150,
                     corner_radius=32)
Machine2.grid()

Machine3 = CTkButton(master=MachineListFrame, text="Machine 3", anchor="w", command=lambda: Data(Machine3), width=150,
                     corner_radius=32)
Machine3.grid()

Machine4 = CTkButton(master=MachineListFrame, text="Machine 4", anchor="w", command=lambda: Data(Machine4), width=150,
                     corner_radius=32)
Machine4.grid()

Machine5 = CTkButton(master=MachineListFrame, text="Machine 5", anchor="w", command=lambda: Data(Machine5), width=150,
                     corner_radius=32)
Machine5.grid()

Machine6 = CTkButton(master=MachineListFrame, text="Machine 6", anchor="w", command=lambda: Data(Machine6), width=150,
                     corner_radius=32)
Machine6.grid()

Machine7 = CTkButton(master=MachineListFrame, text="Machine 7", anchor="w", command=lambda: Data(Machine7), width=150,
                     corner_radius=32)
Machine7.grid()

Machine8 = CTkButton(master=MachineListFrame, text="Machine 8", anchor="w", command=lambda: Data(Machine8), width=150,
                     corner_radius=32)
Machine8.grid()

Machine9 = CTkButton(master=MachineListFrame, text="Machine 9", anchor="w", command=lambda: Data(Machine9), width=150,
                     corner_radius=32)
Machine9.grid()

'Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data'

'Set Set Set Set Set Set Set Set Set Set Set Set Set Set Set Set'
Data(Machine1)

Window.mainloop()

I don't think you should call grid() without row and column. You might find it to difficult to debug your issue. I personally prefer using .pack() instead of .grid().

I guess this should be in the discussions tab. Please do correct me if I am wrong. I am still learning to use GitHub properly.

Hope this helps