Buttons layout not forming chessboard in frame

Question

I am making a chess program and I am trying to use the grid method to make the board in the draw board function. but the layout is misbehaving it currently on shows the first two rows but are large gap is between the rows (I assume the other 6 are outputted below the bottom of the window) Any ideas? Thanks in advance

import tkinter as tk#imports the gui 


class Layout(tk.Tk):
    colours = ["#563a12", "#9f9362"]#square colours dark then light

    def __init__(self, n=8):
        super().__init__()
        self.n = n
        self.middleframe = tk.Frame(self, )
        self.middleframe.grid(row=0, column=3, rowspan=8, columnspan=8)

        self.canvas = tk.Canvas(self, width=1200, height=768, )
        self.canvas.grid(row=0, column=1, columnspan=8, rowspan=8)


        self.colourindex = 0
        self.square= (0,0)

        self.promotefont=("Segoe UI Symbol", 35)
        self.piecefont=("Segoe UI Symbol", 30) 

        self.newgame=tk.Button(self, text="New Game",  font=("Segoe UI", 15), command=self.drawboard)
        self.newgame.grid(row=0, column=0)

        def drawboard(self):

        x=0
        y=0
        for column in range(self.n):
            self.changecolours()
            x=x+1
            y=0
            for row in range(self.n):
                y=y+1
                colour = self.colours[self.colourindex] 
                thebuttons=(tk.Button(self.middleframe,  text="♚", bg=colour, borderwidth=2, relief="solid", font=self.piecefont,  ))
                thebuttons.grid(column=(x-1), row=(y-1))
                self.changecolours()    


    def changecolours(self):
        self.colourindex = (self.colourindex + 1) % 2

You can try the answer on this question : https://stackoverflow.com/questions/7591294/how-to-create-a-self-resizing-grid-of-buttons-in-tkinter — PRMoureu, Sep 12 '19 at 05:39
Some of the indentations in your code is broken (`def drawboard(self)`, or the code below it). — Bryan Oakley, Sep 12 '19 at 13:57
What's the purpose of the canvas? The way you've organized things, all buttons are going in the frame, but the canvas is being put on top of the frame, hiding all of the buttons. Is that intentional? — Bryan Oakley, Sep 12 '19 at 14:03

score 0 · Accepted Answer · answered Sep 12 '19 at 21:08

This is due to as Bryan Oakley said the frame being ontop of the buttons simply reaaranging the following four lines of code fixed the issue


self.canvas = tk.Canvas(self, width=1200, height=768, )
self.canvas.grid(row=0, column=1, columnspan=8, rowspan=8)
self.middleframe = tk.Frame(self, )
self.middleframe.grid(row=0, column=3, rowspan=8, columnspan=8)

Buttons layout not forming chessboard in frame

1 Answers1