Ad

Button Grid Shrinking Vertically When Adding A Certain Amount Of Images

- 1 answer

I'm making a chess board in Tkinter with chess piece images to get used to the module, and have success with placing the first N-1 images in a row in an NxN grid.

However, upon coding an Nth image on any row, the row in question shrinks vertically.

I'm trying to use an OOP approach and am thinking there may be a method i'm misusing or missing entirely.

I've tried adjusting the arguments for the grid() method such as row and column, but they don't appear to affect the result. Adjusting the width and height of the buttons did not do anything significant. I used a 4x3 grid as a testing example and the images fit with the grid if I leave an empty button without an image in a row.

import tkinter as tk
class ChessBoard(tk.Frame):
    def __init__(self, parent, *args, **kwargs):
        tk.Frame.__init__(self,parent,*args,**kwargs)
        self.parent = parent
        self.button_identities = [[[] for x in range(3)] for y in range(3)]
        self.pictures = {"Rook":tk.PhotoImage(file="rook.png")}
        self.initialize_board()

    def initialize_board(self):
        for r in range(3):
            for c in range(3):
                button = tk.Button(self.parent,bg="white",\
                    width=10,height=5)
                button.grid(row=r,column=c,sticky="sewn")
                self.button_identities[r][c] = button
        self.setup_starting_positions()

    def setup_starting_positions(self):
        # Commenting out one of the lines in this method keeps the example row intact
        # In this example I'm trying to make 3 images fit in a single row without the row shrinking
        self.button_identities[0][0].config(image=self.pictures["Rook"])
        self.button_identities[0][1].config(image=self.pictures["Rook"])
        self.button_identities[0][2].config(image=self.pictures["Rook"])
class MainApplication(tk.Frame):
    # The Main Application hosts the Chessboard frame
    def __init__(self, parent, *args, **kwargs):
        tk.Frame.__init__(self,parent,*args,**kwargs)
        self.parent = parent
        self.parent.geometry('{}x{}'.format(1000,800))
        self.chessboard = ChessBoard(self)
        self.chessboard.grid_propagate(False)
        self.chessboard.grid(row=1,column=1,columnspan=3)

if __name__ == "__main__":
    root = tk.Tk()
    MainApplication(root).grid(row=0,column=0)
    root.mainloop()

I expected the buttons to show some sign of changing when I tried editing the grid() methods or width/height arguments when initializing a Button, but nothing remarkable seemed to change. I feel as though I'm not understanding how the Grid manager works in this case. Sorry for the lack of images.

Ad

Answer

In empty Button (or with text) height=5 means 5 lines of text. When you put image then it means 5 pixels.

When you have empty button in row then it has size 5 lines and it is the highest widget in row so other buttons are resized to row size. When you add last button then all buttons has height 5 pixels and there is bigger widget to resize row.

So you have to set width and height in pixels and put all images.

Or simple remove width, height from buttons and they will use width, height of image.

button = tk.Button(self.parent, bg="white")

See: Button

Ad
source: stackoverflow.com
Ad