How to stop the location of one grid element from changing due to the update of the content of another grid element in python tkinter?

I have written code for a small python tkinter application which goes as follows

import tkinter as tk

from tkinter import *
import tkinter.filedialog as fdialog

class karl(Frame):
  def __init__(self):
    tk.Frame.__init__(self)
    self.pack(fill = tk.BOTH)
    self.master.title("Image Selector")
    self.master.geometry("500x500")
    self.master.resizable(0, 0)
    self.pack_propagate(0)

    self.label_button_1 = Label(self, text="Select directory for picking images")
    self.label_button_1.grid(row = 0, column = 1, rowspan = 1, columnspan = 2, sticky = W)

    self.button_1 = tk.Button(self, text="CLICK HERE", width=25, command=self.open_dialog_box_to_select_folder)
    self.button_1.grid(row=0, column=20, rowspan=1, columnspan=2, sticky=E)

    self.label_for_label_directory = Label(self, text="Current chosen directory")
    self.label_for_label_directory.grid(row=20, column=1, rowspan=1, columnspan=2, sticky=E)

    self.label_directory = Label(self, text="")
    self.label_directory.grid(row=20, column=5, rowspan=1, columnspan=2, sticky=W)

    self.label_for_entry_for_class_label_values = Label(self, text="Enter text")
    self.label_for_entry_for_class_label_values.grid(row = 24, column = 1, rowspan = 1, columnspan = 2, sticky = W)

    self.entry_for_class_label_values = Entry(self)
    self.entry_for_class_label_values.grid(row = 24, column = 5, rowspan = 1, columnspan = 2, sticky = E)


  def open_dialog_box_to_select_folder(self):

    self.chosen_directory_name = fdialog.askdirectory()
    self.label_directory.config(text = self.chosen_directory_name)



def main():
   karl().mainloop()

if __name__ == '__main__':
   main()  

As soon as button_1 is clicked and the label_directory gets updated with the string for directory, the position of button_1 gets pushed towards the right and goes outside the application window. How can I stop this from happening?

Answer

The problem is that when you are selecting a folder and updating self.label_directory with the String of the path to the selected folder it is manipulating the grid and expanding your Click Here Button.

To fix this issue, firstly button_1 should have a its sticky option set to W, so then it doesn’t move to the right side of it’s grid cell, when it’s grid cells width is manipulated.

Another issue you have is that you are increasing you rows and columns of your grid placement too much, you should only increment by the needed spaces, for example, you should start at row 1 and then place your next row at row 2, this helps make sure it is easy to understand where each element is placed.

With that all said I believe this code will fix the issue suitably:

import tkinter as tk

from tkinter import *
import tkinter.filedialog as fdialog

class karl(Frame):
  def __init__(self):
    tk.Frame.__init__(self)
    self.pack(fill = tk.BOTH)
    self.master.title("Image Selector")
    self.master.geometry("500x500")
    self.master.resizable(0, 0)
    self.pack_propagate(0)

    self.label_button_1 = Label(self, text="Select directory for picking images")
    self.label_button_1.grid(row = 0, column = 0, columnspan = 1, sticky = W)

    self.button_1 = tk.Button(self, text="CLICK HERE", width=25, command=self.open_dialog_box_to_select_folder)
    self.button_1.grid(row=0, column=1, columnspan=2, sticky=W)

    self.label_for_label_directory = Label(self, text="Current chosen directory")
    self.label_for_label_directory.grid(row=1, column=0, rowspan=1, columnspan=1, sticky=W)

    self.label_directory = Label(self, text="")
    self.label_directory.grid(row=1, column=1, rowspan=1, columnspan=2, sticky=W)

    self.label_for_entry_for_class_label_values = Label(self, text="Enter (+) seperated class labelsnto be assigned to the images")
    self.label_for_entry_for_class_label_values.grid(row = 2, column = 0, rowspan = 1, columnspan = 2, sticky = W)

    self.entry_for_class_label_values = Entry(self)
    self.entry_for_class_label_values.grid(row = 2, column = 1, rowspan = 1, columnspan = 1, sticky = W)


  def open_dialog_box_to_select_folder(self):

    self.chosen_directory_name = fdialog.askdirectory()
    self.label_directory.config(text = self.chosen_directory_name)



def main():
   karl().mainloop()

if __name__ == '__main__':
    main()

I changed the elements previously mentioned to accomplish this, if you have any questions about my solution feel free to ask :)

Here is your tkinter program converted to an excel file, to visualize how the grid system works, the light blue is where your path string will be put when you select a folder.

When you select a long file path, the path_label expands (the light blue section of the excel, this will push the click me button to the right. So far right that it will push the button of the windows view-able area like so.