Lower monitor resolution causes tkinter window to be cut at right

Question

I am using Tkinter gui, and at my default screen resolution (1920x1080), the dashboard displays fine as in image:

But when I run the same code on a lower resolution laptop (let's say 1366x768), right most widgets are cut as seen in picture below:

Here is my code which involves 2 windows root_tk is the main window which have a button called dashboard. When we press dashboard button, the dashboard window pops up. I have already tried the solutions Resolution problem of widgets with fixed lengths in Tkinter application Why is my tkinter Gui cut off on the right?

But they do not work for me. Here is my code:

root_tk = customtkinter.CTk()
root_tk.state("zoomed")
root_tk.rowconfigure(3, weight=1)
root_tk.title("CustomTkinter Test")
frame_0 = Frame(root_tk,background="white")
frame_0.grid(row=0,column=0,sticky="ns",rowspan=4)

def dash():

    dash_tk2 = customtkinter.CTkToplevel(root_tk)
    dash_tk2.state("zoomed")
    dash_tk2.update_idletasks()
    dash_tk2.title("Dashboard")
    dash_tk2.configure(bg='#302E2E')

    frame_dash1 = customtkinter.CTkFrame(master=dash_tk2, corner_radius=15, fg_color="white")
    frame_dash2 = customtkinter.CTkFrame(master=dash_tk2, corner_radius=15, fg_color="white")
    frame_dash2a = customtkinter.CTkFrame(master=frame_dash2, corner_radius=15, fg_color="#FBBDBE")
    frame_dash3 = customtkinter.CTkFrame(master=dash_tk2, corner_radius=15, fg_color="white")
    frame_dash3a = customtkinter.CTkFrame(master=frame_dash3, corner_radius=15, fg_color="#FBBDBE")
    frame_dash4 = customtkinter.CTkFrame(master=dash_tk2, corner_radius=15, fg_color="white")
    frame_dash4a = customtkinter.CTkFrame(master=frame_dash4, corner_radius=15, fg_color="#FBBDBE")
    frame_dash5 = customtkinter.CTkFrame(master=dash_tk2, corner_radius=15, fg_color="white")
    frame_dash5a = customtkinter.CTkFrame(master=frame_dash5, corner_radius=15, fg_color="#FBBDBE")
    frame_dash6 = customtkinter.CTkFrame(master=dash_tk2, corner_radius=15, fg_color="white")
    blank_row1 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", height=10)
    blank_col1 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", width=10)
    blank_col2 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", width=10)
    blank_col3 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", width=10)
    blank_col4 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", width=10)
    blank_col5 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", width=10)
    blank_col6 = customtkinter.CTkFrame(master=dash_tk2, fg_color="yellow", width=10)
    blank_row1.grid(row=0, column=0,columnspan=6)
    blank_col1.grid(row=1, column=0)
    frame_dash1.grid(row=1, column=1, sticky='ns',rowspan=2)
    blank_col2.grid(row=1, column=2)
    frame_dash2.grid(row=1, column=3, sticky='n',rowspan=2)
    blank_col3.grid(row=1, column=4)
    frame_dash3.grid(row=1, column=5, sticky='n',rowspan=2)
    blank_col4.grid(row=1, column=6)
    frame_dash4.grid(row=1, column=7, sticky='n',rowspan=2)
    blank_col5.grid(row=1, column=8)
    frame_dash5.grid(row=1, column=9, sticky='n',rowspan=2)
    blank_col6.grid(row=1, column=10)
    frame_dash6.grid(row=1, column=11, sticky='n')

    frame_dash2a.grid(row=1, column=1, pady=(20, 10))
    frame_dash3a.grid(row=1, column=1, pady=(20, 10))
    frame_dash4a.grid(row=1, column=1, pady=(20, 10))
    frame_dash5a.grid(row=1, column=1, pady=(20, 10))

    blank_row2 = customtkinter.CTkFrame(master=frame_dash1, fg_color="orange", height=15)
    blank_row2.grid(row=0,column=0,columnspan=2)
    lab_tag = Label(frame_dash1, text="TAG", anchor=W, width=20, font='Tahoma 7', fg="black", bg='white')
    lab_tag2 = Label(frame_dash1, text="FLOW Meter 4981", anchor=W, width=20, font='Tahoma 15', fg="black", bg='white')
    blank_col7 = customtkinter.CTkFrame(master=frame_dash1, fg_color="orange", width=15)
    blank_col7.grid(row=1, column=0,rowspan=15,sticky='ns')
    lab_tag.grid(row=2, column=1, pady=(10, 0), sticky='w')
    lab_tag2.grid(row=3, column=1, sticky='w')

    lab_dashhead2 = Label(frame_dash2, text="MASS FLOW (KG/HR)", anchor=CENTER, font='Tahoma 10 bold', fg="white",bg='#EB3F3F')
    lab_massflow2a = Label(frame_dash2a, text="19,999.999", anchor=CENTER, font='Tahoma 25 bold', fg="black", bg='#FBBDBE',width=10)
    blank_col8 = customtkinter.CTkFrame(master=frame_dash2, fg_color="orange", width=10)
    blank_col8.grid(row=1, column=0,rowspan=3)
    blank_col9 = customtkinter.CTkFrame(master=frame_dash2, fg_color="orange", width=10)
    blank_col9.grid(row=1, column=2,rowspan=3)
    lab_dashhead2.grid(row=0, column=0, sticky='ew', pady=15, ipady=5, columnspan=3)
    lab_massflow2a.grid(row=0, column=0, pady=20)

    lab_dashhead3 = Label(frame_dash3, text="VOLUMETRIC FLOW (M\u00b3/HR)", anchor=CENTER, font='Tahoma 10 bold', fg="white",bg='#EB3F3F')
    lab_massflow3a = Label(frame_dash3a, text="99,999", anchor=CENTER, font='Tahoma 25 bold', fg="black", bg='#FBBDBE',width=10)
    blank_col10 = customtkinter.CTkFrame(master=frame_dash3, fg_color="orange", width=10)
    blank_col10.grid(row=1, column=0,rowspan=3)
    blank_col11 = customtkinter.CTkFrame(master=frame_dash3, fg_color="orange", width=10)
    blank_col11.grid(row=1, column=2,rowspan=3)
    lab_dashhead3.grid(row=0, column=0, sticky='ew', pady=15, ipady=5, columnspan=3)
    lab_massflow3a.grid(row=0, column=0, pady=20)

    lab_dashhead4 = Label(frame_dash4, text="STD.VOLUMETRIC FLOW (KG/HR)", anchor=CENTER, font='Tahoma 10 bold',fg="white", bg='#EB3F3F')
    lab_massflow4a = Label(frame_dash4a, text="99999.99", anchor=CENTER, font='Tahoma 25 bold', fg="black", bg='#FBBDBE',width=10)
    blank_col12 = customtkinter.CTkFrame(master=frame_dash4, fg_color="orange", width=10)
    blank_col12.grid(row=1, column=0,rowspan=3)
    blank_col13 = customtkinter.CTkFrame(master=frame_dash4, fg_color="orange", width=10)
    blank_col13.grid(row=1, column=2,rowspan=3)
    lab_dashhead4.grid(row=0, column=0, sticky='ew', pady=15, ipady=5, columnspan=3)
    lab_massflow4a.grid(row=0, column=0, pady=20)

    lab_dashhead5 = Label(frame_dash5, text="ENERGY FLOW (KG/HR)", anchor=CENTER, font='Tahoma 10 bold', fg="white",
                          bg='#EB3F3F')
    lab_massflow5a = Label(frame_dash5a, text="99999.99", anchor=CENTER, font='Tahoma 25 bold', fg="black", bg='#FBBDBE',width=10)


    blank_col14 = customtkinter.CTkFrame(master=frame_dash5, fg_color="orange", width=10)
    blank_col14.grid(row=1, column=0,rowspan=3)
    blank_col15 = customtkinter.CTkFrame(master=frame_dash5, fg_color="orange", width=10)
    blank_col15.grid(row=1, column=2,rowspan=3)
    lab_dashhead5.grid(row=0, column=0, sticky='ew', pady=15, ipady=5, columnspan=3)
    lab_massflow5a.grid(row=0, column=0, pady=20)

    lab_dashhead6a = Label(frame_dash6, text="REAL FACTORS", anchor=CENTER, font='Tahoma 10 bold',fg="white", bg='#7F7F7F',width=34)
    lab_diffpx_un = Label(frame_dash6, text="MEASUREMENT FACTORS INVOLVED IN PROCESS (%)", anchor=CENTER,font='Tahoma 10', fg="black", bg='#C0C0C0',wraplength=200)
    lab_diffpx_un_val = Label(frame_dash6, text="", anchor=CENTER, font='Tahoma 13 bold', fg="black",bg='#E8E8E8')
    lab_dashhead6a.grid(row=0, column=0, sticky='ew', pady=(15,25), ipady=5)
    lab_diffpx_un.grid(row=1, column=0, sticky='ew')
    lab_diffpx_un_val.grid(row=2, column=0, sticky='ew')

    dash_tk2.mainloop()

You can use different font size on those numbers based on the screen width. — acw1668, Aug 24 '22 at 00:33

score 1 · Answer 1 · answered Jul 31 '22 at 16:39

1

Good Question! You can actually make a parent frame for all those frames and widgets and add a scrollbar in x axis to that parent frame.. How to insert a scrollbar to a frame

answered Jul 31 '22 at 16:39

Belal Ahmed

189
1
2
10

Cant it be done without a scroll bar? Theres gotta be a way of doing this!! – Muhammad Farzan Bashir Aug 01 '22 at 06:14

score 0 · Answer 2 · answered Aug 23 '22 at 20:50

You have to assign a weight to the grid cells you created. If you want every grid cell in row 1 of the top-level to be equally weighted, you do it like the following:

dash_tk2.grid_columnconfigure((0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11), weight=1)

Small window: enter image description here Wide window:

Lower monitor resolution causes tkinter window to be cut at right

2 Answers2