python tkinter grid positioning

Question

I'm a newbie at Python and trying my first layout with grid. What I really need is this layout:

final layout

My listing is:

1. root=Tk()
2. root.geometry("640x480")
3. root.title("Skroutz Parser")

#entryText=StringVar(root)
4. topFrame=Frame(root, bg='cyan', width = 640, height=80)
5. middleFrame=Frame(root,bg='gray2', width=640, height=400)
6. bottomFrame=Frame(root, bg='yellow', width = 640, height=50)

# layout all of the main containers
7. root.grid_rowconfigure(1, weight=1)
8. root.grid_columnconfigure(0, weight=1)

9. topFrame.grid(row=0)
10.middleFrame.grid(row=1)
11.bottomFrame.grid(row=2)

# layout middle container
12.middleFrame.grid_rowconfigure(0, weight=1)
13.middleFrame.grid_columnconfigure(0, weight=1)

14.leftFrame=Frame(middleFrame, bg='green', width = 125, height=400)
15.rightFrame=Frame(middleFrame, bg='white', width = 515, height=400)

16.leftFrame.grid(row=0,column=0,sticky="n")
17.rightFrame.grid(row=0, column=1)

18.buttonFeatured=Button(leftFrame, text='   Recommended    ', pady=5, .command=showRecommendedProductsResults)
19.buttonSkroutz=Button(leftFrame, text='Skroutz Products', pady=5, command=printSkroutzProducts)
20.buttonFeatured.grid(row=0, column=0, sticky="n")
21.buttonSkroutz.grid(row=1, column=0)

22.entryText=StringVar()
23.entryMain=Entry(rightFrame,textvariable=entryText, bg="white")
24.entryMain.grid(row=0,column=0,rowspan=2,columnspan=5,sticky="w")

25.root.mainloop()

If i comment lines 18-24, then I get more or less the desired layout:

enter image description here

if I uncomment lines 18-21 (leaving commented lines 22-24) then I get this (strange black color on left frame):

enter image description here

and if I uncomment the rest of the lines....I get a mess!!!

enter image description here

I'm struggling two days now, but no luck.... Any help will be appreciated! Thanks!

Do you want a multi-line or single line text widget in there? — Nae, Dec 25 '17 at 11:20
Please provide [a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) as is your code has redundant parts. — Nae, Dec 25 '17 at 11:26
You have to structure your code better or things may get out of hand like this. OOP approach really makes you organize such scripts easier. — Nae, Dec 25 '17 at 11:28

Nae · Answer 1 · 2017-12-25T13:43:45.267

Check the following code, I have made multiple changes that I lost track of:

from tkinter import *

root=Tk()
root.geometry("640x480")
root.title("Skroutz Parser")

#entryText=StringVar(root)
topFrame=Frame(root, bg='cyan', width = 640, height=80)
middleFrame=Frame(root,bg='gray2', width=640, height=400)
bottomFrame=Frame(root, bg='yellow', width = 640, height=50)

# layout all of the main containers
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)

topFrame.grid(row=0, column=0, sticky='ew')
middleFrame.grid(row=1, column=0, sticky='nsew')
bottomFrame.grid(row=2, column=0, sticky='ew')

# layout middle container
middleFrame.grid_rowconfigure(0, weight=1)
middleFrame.grid_columnconfigure(1, weight=1)

leftFrame=Frame(middleFrame, bg='green', width = 125, height=400)
rightFrame=Frame(middleFrame, bg='white', width = 515, height=400)

leftFrame.grid(row=0,column=0,sticky="nsew")
rightFrame.grid(row=0, column=1, sticky='nsew')

leftFrame.grid_columnconfigure(0, weight=1)
rightFrame.grid_rowconfigure(0, weight=1)
rightFrame.grid_columnconfigure(0, weight=1)

buttonFeatured=Button(leftFrame, text='   Recommended    ', pady=5)
buttonSkroutz=Button(leftFrame, text='Skroutz Products', pady=5)
buttonFeatured.grid(row=0, column=0, sticky="new")
buttonSkroutz.grid(row=1, column=0, sticky='new')

entryText=StringVar()
entryMain=Entry(rightFrame,textvariable=entryText, bg="white")
entryMain.grid(row=0,column=0,sticky="new")

root.mainloop()

Now if you want larger text area you can either increase font size or you can instead have multi-line entry, Text which you can configure the size of.

You really should check out structure question & answers though.

score 0 · Answer 2 · answered Oct 21 '21 at 06:15

This code will reproduce a GUI that matches the desired layout as displayed in the image.

I've used import tkinter as tk and included function flexx for control of row and column configurations. Apart from that code is virtually the same as original post.

Window is resizable.

import tkinter as tk

def flexx(m, r = 0, c = 0, rw = 1, cw = 1):
    if r !=  None:
        m.rowconfigure(r, weight = rw)
    if c !=  None:
        m.columnconfigure(c, weight = cw)

root = tk.Tk()
root.title("Skroutz Parser")
flexx(root, r = 1)

topFrame = tk.Frame(root, bg = "cyan", width = 640, height = 80)
middleFrame = tk.Frame(root, bg = "gray2", width = 640, height = 400)
bottomFrame = tk.Frame(root, bg = "yellow", width = 640, height = 50)

topFrame.grid(sticky = tk.NSEW)
middleFrame.grid(sticky = tk.NSEW)
bottomFrame.grid(sticky = tk.NSEW)

flexx(middleFrame, c = 1)

leftFrame = tk.Frame( middleFrame, bg = "green")
rightFrame = tk.Frame( middleFrame, bg = "white")
leftFrame.grid(sticky = tk.NS)
rightFrame.grid(row = 0, column = 1, sticky = tk.NSEW)

flexx(leftFrame, rw = 0)
flexx(leftFrame, rw = 0, c = 1)
flexx(rightFrame, rw = 0)

buttonFeatured = tk.Button(leftFrame, text = "   Recommended    ", pady = 5) #, .command = showRecommendedProductsResults)
buttonSkroutz = tk.Button(leftFrame, text = "Skroutz Products", pady = 5) # , command = printSkroutzProducts)
buttonFeatured.grid(sticky = tk.NSEW)
buttonSkroutz.grid(sticky = tk.NSEW)

entryText = tk.StringVar(root, value = "Some text...")
entryMain = tk.Entry(rightFrame, textvariable = entryText,
                     justify = tk.CENTER, bg = "white",
                     borderwidth = 3, relief = tk.SOLID)
entryMain.grid(rowspan = 2, ipady = 50, sticky = tk.NSEW)

root.geometry("740x512")
root.mainloop()

python tkinter grid positioning

2 Answers2