pythontkinterdesktop-applicationpositioningtkinter-button

Tkinter layout doesn’t place buttons in the right place


I am trying to make an image viewer using Python Tkinter as a part of the course I am participating in and I am having some trouble with my code.

My problem is in the positioning of the forward and the exit button in the first image, The picture explains this Look at the exit and forward(>>) button under the screen By the way, this problem is only appears in the first image but in the others, the positioning is perfect as shown in the picture the back(<<) and the forward and the exit buttons are in the correct position

I have tried to read and debug the code multiple times, and I have even looked at the source code from the course, but I still can't seem to find the issue. Do you have any suggestions or recognize any bugs that I may have missed? Any help would be greatly appreciated. Thank you!

Here is all code:

#importing files
from tkinter import *
from PIL import ImageTk,Image

#the start of the program

root = Tk()

root.title("Image Viewer")

root.iconbitmap("E:\Marwan\PROGRAMMING\learning 
py\Tkinter\Projects\#2 Image Viewer\image viewer.ico")

#Image used
my_img1 = ImageTk.PhotoImage(Image.open("E:/Marwan\IMAGES/ai 
images/3.png"))

my_img2 = 
ImageTk.PhotoImage(Image.open("E:\Marwan\IMAGES\megory2.PNG"))

my_img3 = 
ImageTk.PhotoImage(Image.open("E:\Marwan\IMAGES\marwan.JPG"))

my_img4 = ImageTk.PhotoImage(Image.open("E:/Marwan\IMAGES/ai 
images/ff.png"))

my_img5 = ImageTk.PhotoImage(Image.open("E:/Marwan/IMAGES/ai 
images/55.png"))

my_img6 = ImageTk.PhotoImage(Image.open("E:/Marwan/IMAGES/ai 
images/77.png"))

#list of the images
image_list = [my_img1,my_img2,my_img3,my_img4, my_img5,my_img6]

#previwing the images for the first time
my_label = Label(image=my_img1)
my_label.grid(row=0, column=0)

#function of the forward button
def forward(img_num):
    #globaling the vars
    global my_label

    global button_forward
   
    global button_back

    #forgetting the last img
    my_label.grid_forget()

    #previewing the current img
    my_label = Label(image=image_list[img_num-1])

    #commanding the buttons
    button_forward = Button(root, text='>>', command= lambda: 
    forward(img_num+1))

    button_back = Button(root, text='<<', command= lambda: 
    back(img_num-1))

    #disabling the forward button at the last img
    if img_num == 5:
       button_forward = Button(root, text='>>', state=DISABLED) 

    #gridding the widgets and appears it   
    my_label.grid(row=0,column=0,columnspan=3)

    button_forward.grid(row=1, column=2)

    button_back.grid(row=1, column=0)


#function of the forward button
def back(img_num):

    global my_label

    global button_forward

    global button_back
    
    my_label.grid_forget()

    my_label = Label(image=image_list[img_num-1])

    button_forward = Button(root, text='>>', command= lambda: 
    forward(img_num+1))

    button_back = Button(root, text='<<', command= lambda: 
    back(img_num-1))

    if img_num == 5:
        button_forward = Button(root, text='>>', state=DISABLED) 
    
    my_label.grid(row=0,column=0,columnspan=3)

    button_forward.grid(row=1, column=2)

    button_back.grid(row=1, column=0)




#Buttons of the first img
button_back = Button(root, text='<<',command= back, 
state=DISABLED)

button_exit = Button(root, text='Exit Program', 
command=root.quit)

button_forward = Button(root, text='>>', command= lambda: 
forward(2))

#gridding the widgets and appears it
button_back.grid(row=1, column=0)

button_exit.grid(row=1, column=1)

button_forward.grid(row=1, column=2)

root.mainloop()

Solution

  • In your forward() and back() and functions, you have set the columnspan to 3 using the following:

    my_label.grid(row=0,column=0,columnspan=3)
    

    However, when you load the image for the first time, you don’t set the columnspan value. Your code looks like this:

    my_label = Label(image=my_img1)
    my_label.grid(row=0, column=0)
    

    That’s why the layout doesn’t work only for the first image. To fix it, just set the columnspan value:

    my_label = Label(image=my_img1)
    my_label.grid(row=0,column=0,columnspan=3)