Search code examples
pythontkinter

UI grid alignment suddenly changes during subprocess run

My UI looks like this:

enter image description here

As soon as I hit the "Start" button to run the subprocess, my UI alignment goes wrong; the 2 buttons take up this extra blank space, as you can see from the picture:

enter image description here

Here is the source code of the UI layout. What am I doing wrong?:

# UI ----------------------------------------------------------------------------
def browse_click(label, hint):
    folder_path = filedialog.askdirectory(title=hint)
    if folder_path:
        label.config(text=folder_path)
    root.update()

def disable_buttons():
    btn_start.config(state=tk.DISABLED)
    btn_browse_1.config(state=tk.DISABLED)
    btn_browse_2.config(state=tk.DISABLED)
    root.update()

def enable_buttons():
    btn_start.config(state=tk.NORMAL)
    btn_browse_1.config(state=tk.NORMAL)
    btn_browse_2.config(state=tk.NORMAL)
    root.update()

def update_status(message, sep='\n'):
    status_label.config(text=message)
    log_output(message, sep)
    root.update()

def log_output(message, sep='\n'):
    log_text_box.config(state=tk.NORMAL)
    log_text_box.insert(tk.END, message + sep)
    log_text_box.config(state=tk.DISABLED)
    root.update()
    
def reset_Log():
    log_text_box.config(state=tk.NORMAL)
    log_text_box.delete(1.0, tk.END)
    log_text_box.config(state=tk.DISABLED)
    root.update()

# Create UI
root = tk.Tk()
root.title("Excel Processing Tool")
screen_width = 1200 #root.winfo_screenwidth()
screen_height = root.winfo_screenheight() - 200 # avoid the taskbar height
root.geometry('%dx%d' % (screen_width, screen_height))
root.rowconfigure(4, weight=1) # Expand the text box
root.columnconfigure(1, weight=1) # Expand the input/output folder entry

# Select input folder
btn_browse_1 = tk.Button(root, text="Source Folder: ", anchor="w", command=lambda: browse_click(input_folder_label, "Input Folder")) 
btn_browse_1.grid(row=0, column=0, padx=5, pady=5)
input_folder_label = tk.Label(root, borderwidth=2, relief="groove",background="white", anchor="w") 
input_folder_label.grid(row=0, column=1, padx=5, pady=5, sticky="ew")

# Select output  folder
btn_browse_2 = tk.Button(root, text="Output Folder:", anchor="w", command=lambda: browse_click(output_folder_label, "Output Folder"))
btn_browse_2.grid(row=1, column=0, padx=5, pady=5)
output_folder_label = tk.Label(root, borderwidth=2, relief="groove", background="white", anchor="w")
output_folder_label.grid(row=1, column=1, padx=5, pady=5, sticky="ew")

# Start button
btn_start = tk.Button(root, text="START", command=run_scripts, width="10")
btn_start.grid(row=2, column=0, columnspan=2, pady=(10,0))

# Status label
status_label = tk.Label(root, text="(0/0)")
status_label.grid(row=3, column=0, padx=5, pady=(0,2), sticky="w")

log_text_box = tk.Text(root, state=tk.DISABLED)
log_text_box.grid(row=4, column=0, columnspan=2, padx=5, pady=(0,5), sticky="wens")

# RUN UI
root.mainloop()
Solution

  • As status_label is put at column 0, when it is updated with long text then the width of column 0 will be expanded which causes your issue.

    Add columnspan=2 to status_label.grid(...) will fix the issue.