CODEWITHSUNDEEP
pythontkinter
ealfonso
ealfonso

Reputation: 7302

Displaying square Tkinter.Button's?

Why does this code display buttons taller than they are wide?

import Tkinter, tkFont
top = Tkinter.Tk()
right = Tkinter.Frame(top)
right.pack(side = "right")
font = tkFont.Font(family="Helvetica", size=60, weight = tkFont.BOLD)

for i in xrange(6):
    b = Tkinter.Button(right, text = str(i), font = font, width = 1, height = 1)
    top.rowconfigure(i, weight = 1)
    top.columnconfigure(i, weight = 1)
    b.grid(row = i/3, column = i%3, sticky = "NWSE")

top.mainloop()

What exactly am I doing wrong?

If I put the buttons directly onto top, the buttons just become wider than tall. It seems that they are being resized to accomodate propagated space. How do I prevent this resizing?

Upvotes: 5

Views: 11683

Answers (3)

CatHelper
CatHelper

Reputation: 1

Its because 5x5 doesn't represent 5 pixels by 5 pixels, but 5 zero's by 5 zero's

it represents this:

00000
0
0
0
0

Upvotes: 0

atlasologist
atlasologist

Reputation: 3964

Another method is to trick the Button into thinking it's displaying an image, so its units can be manipulated by pixels instead of text-size.

You can do this by creating an empty instance of PhotoImage, setting it to the image option of the button, and using the compound option of the button to combine the "image" and text. Here's an example using part of your code:

import Tkinter, tkFont


root = Tkinter.Tk()

font = tkFont.Font(family="Helvetica", size=60, weight = tkFont.BOLD)
blank_image = Tkinter.PhotoImage()

for i in xrange(6):
    b = Tkinter.Button(root, image=blank_image, text=str(i),
                       font=font, compound=Tkinter.CENTER)

    # get the height of the font to use as the square size
    square_size = font.metrics('linespace')
    b.config(width=square_size, height=square_size)

    b.grid(row = i/3, column = i%3, sticky = "NWSE")

root.mainloop()

Upvotes: 4

Lafexlos
Lafexlos

Reputation: 7735

If a Button displays text, when you use height and width options, their units in text unit. To make them square, using pixel unit would be better. To do that, you need to place that button in a Frame and make sure frame won't propagate(grid_propagate) and allow its children to fill it (columnconfigure & rowconfigure).

This is just an example, since I don't see your code.

import Tkinter as tk

master = tk.Tk()

frame = tk.Frame(master, width=40, height=40) #their units in pixels
button1 = tk.Button(frame, text="btn")


frame.grid_propagate(False) #disables resizing of frame
frame.columnconfigure(0, weight=1) #enables button to fill frame
frame.rowconfigure(0,weight=1) #any positive number would do the trick

frame.grid(row=0, column=1) #put frame where the button should be
button1.grid(sticky="wens") #makes the button expand

tk.mainloop()

EDIT: I just saw your edit(adding your code). After applying same things to your code;

import Tkinter, tkFont
top = Tkinter.Tk()
right = Tkinter.Frame(top)
right.pack(side = "right")
font = tkFont.Font(family="Helvetica", size=20, weight = tkFont.BOLD)

for i in xrange(6):
    f = Tkinter.Frame(right,width=50,height=50)
    b = Tkinter.Button(f, text = str(i), font = font)

    f.rowconfigure(0, weight = 1)
    f.columnconfigure(0, weight = 1)
    f.grid_propagate(0)

    f.grid(row = i/3, column = i%3)
    b.grid(sticky = "NWSE")

top.mainloop()

Upvotes: 9

Related Questions