How to auto-wrap widget in tkinter? - python

I saw this function (layout?) in android a few years ago, but I can't remind what is this function name...
I need an auto-replace widget.
if the new widget' width meets the end of the window, I want to move that widget new line.
The below is my expected output.
I Think, get the width and calculate new widget position will solve it.
But, I think this is so common need. Does tkinter support it?

Since tkinter has a canvas which gives you absolute control over positioning, you can accomplish this with just a little bit of math when adding items. You'll have to add code to reposition the widgets when the window is resized.
A simpler approach is to use the text widget, which supports embedded images or widgets, and has support for wrapping.
Here's a demonstration:
import tkinter as tk
root = tk.Tk()
toolbar = tk.Frame(root)
text = tk.Text(root, wrap="word", yscrollcommand=lambda *args: vsb.set(*args))
vsb = tk.Scrollbar(root, command=text.yview)
toolbar.pack(side="top", fill="x")
vsb.pack(side="right", fill="y")
text.pack(side="left",fill="both", expand=True)
COUNT = 0
def add_widget():
global COUNT
COUNT += 1
widget = tk.Label(root, width=12, text=f"Widget #{COUNT}", bd=1, relief="raised",
bg="#5C9BD5", foreground="white", padx=4, pady=4)
text.configure(state="normal")
text.window_create("insert", window=widget, padx=10, pady=10)
text.configure(state="disabled")
add_button = tk.Button(toolbar, command=add_widget, text="Add")
add_button.pack(side="left")
for i in range(9):
add_widget()
root.mainloop()

Refactored code :
The code in Bryan's answer works very well! But a little bit difficult to understand.
Thus I refactor the code
import tkinter as tk
def add_widget():
widget = tk.Button(root, width=12, text=f"Widget", padx=4, pady=4)
text.window_create("end", window=widget, padx=10, pady=10)
root = tk.Tk()
add_button = tk.Button(root, command=add_widget, text="Add")
add_button.pack()
text = tk.Text(root, wrap="word", yscrollcommand=lambda *args: vscroll.set(*args))
text.configure(state="disabled")
text.pack(side="left",fill="both", expand=True)
vscroll = tk.Scrollbar(root, command=text.yview)
vscroll.pack(side="right", fill="both")
root.mainloop()

Related

Tkinter: 2 buttons next to each other resize in width with window. How to?

The 2 buttons should take each of the half of the window, one on the left, one on the right. The height is fixed all time. With .grid() nor .place() I can come to that result. The red bar is the color of the frame where the buttons are placed on. The buttons resize in width with the window, but keep their constant height.
How to?
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red')
frame.pack(fill='both', expand=True)
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.grid(row=0, column=0, sticky='nsew')
button2.grid(row=0, column=1, sticky='nsew')
frame.columnconfigure(0, weight=1)
frame.columnconfigure(1, weight=1)
root.mainloop()
Thx.
In the mean time I got this:
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red',height=30)
frame.pack(fill='both')
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.place(relwidth=0.5, relx=0, relheight=1)
button2.place(relwidth=0.5, relx=0.5, relheight=1)
root.mainloop()
Assuming that the buttons are the only widgets in the frame (ie: you are making a toolbar), I would use pack. grid will also work, but it requires one extra line of code.
Using pack
Here's a version with pack. Notice that the frame is packed along the top and fills the window in the "x" direction. The buttons each are instructed to expand (ie: receive extra, unused space) and to fill the space allocated to them in the "x" direction.
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red',height=30)
frame.pack(side="top", fill="x")
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.pack(side="left", fill="x", expand=True)
button2.pack(side="right", fill="x", expand=True)
root.mainloop()
Using Grid
A version with grid is similar, but you must use columnconfigure to give a non-zero weight to the two columns:
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg='red',height=30)
frame.pack(side="top", fill="x")
button1 = tk.Button(frame, text="<<")
button2 = tk.Button(frame, text=">>")
button1.grid(row=0, column=0, sticky="ew")
button2.grid(row=0, column=1, sticky="ew")
frame.grid_columnconfigure((0, 1), weight=1)
root.mainloop()

Python tkinter how to use grid sticky

import tkinter as tk
root = tk.Tk()
root.state('zoomed')
text1 = tk.Text(state=tk.DISABLED)
scroll = tk.Scrollbar(root, command=text1.yview)
text1.configure(yscrollcommand=scroll.set)
text1.grid(row=1, column=1, sticky='we')
scroll.grid(row=1, column=2, sticky="nse")
root.mainloop()
How do I make the Text box fill the X axis? (sticky='we' did not work for me)
import tkinter as tk
root = tk.Tk()
root.state('zoomed')
text1 = tk.Text(state=tk.DISABLED)
scroll = tk.Scrollbar(root, command=text1.yview)
text1.configure(yscrollcommand=scroll.set)
text1.grid(row=1, column=0,sticky='we')
scroll.grid(row=1, column=1, sticky="ns")
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=0)
root.mainloop()
I've added the parameter weight to the columns in that grid, which basically is a relationship between the columns. Please see,
What does 'weight' do in tkinter? to get a more detailed answer.

Tkinter columnconfigure weight not adjusting

I am new to the Tkinter module. I only have experience with PyQt5. I am playing with a couple widgets in my Frame. They are three buttons, and I am trying to expand their size relative to the size of the window. To do this I am using w.columnconfigure(n, weight=1). This should spread the 3 buttons I have across the window Frame. This is the code I am running. I have tried with the w.columnconfigure before placing the widgets in the grid, and, as seen in the posted code, after the widgets are placed in the grid. I noticed no difference or functionality. Is there a convention? Anyway, appreciate any guidance!
def create_widgets(self):
""" Create three buttons that do nothing. """
self.bttn1 = Button(self, text="I do nothing")
self.bttn2 = Button(self)
self.bttn2.configure(text="Me too!")
self.bttn3 = Button(self)
self.bttn3["text"] = "Same here!"
self.bttnCt = Button(self)
self.bttnCt["text"] = "Total Clicks: 0"
self.bttnCt["command"] = self.update_count
self.bttn1.grid(row=0, column=0, sticky=W+E)
self.bttn2.grid(row=0, column=1, sticky=W+E)
self.bttn3.grid(row=0, column=2, sticky=W+E)
self.bttnCt.grid(row=1, column=1, sticky=W+E)
bttn_list = [self.bttn1, self.bttn2, self.bttn3, self.bttnCt]
for k, i in enumerate(bttn_list):
i.columnconfigure(k, weight=1)
#self.bttn1.columnconfigure(0, weight=1)
#self.bttn2.columnconfigure(1, weight=3)
#self.bttn3.columnconfigure(2, weight=1)
#self.bttnCt.columnconfigure(3, weight=1)
columnconfigure() or rowconfigure() functions are applied to the window or frame, of which the widget is a part of. Here you are applying it on the button itself. Apply it on on its parent basically.
Here is a small example.
import tkinter as tk
app = tk.Tk()
bttn1 = tk.Button(app, text="I do nothing")
bttn2 = tk.Button(app, text='Me too!')
bttn3 = tk.Button(app, text='Same here!')
bttnCt = tk.Button(app, text='Total Clicks: 0')
bttn1.grid(row=0, column=0, sticky="ew")
bttn2.grid(row=0, column=1, sticky="ew")
bttn3.grid(row=0, column=2, sticky="ew")
bttnCt.grid(row=1, column=1, sticky="ew")
bttn_list = [bttn1, bttn2, bttn3, bttnCt]
for i in range(len(bttn_list)):
app.columnconfigure(i, weight=1) ## Not the button, but the parent
app.mainloop()

How do I add a Scrollbar to a tkinter Text Widget using .grid method

I am trying to create a Scrollbar for my text widget however, I cannot seem to be able to grid() the scrollbar, thus the scrollbar does not appear on the text widget. Ignore what is in the variable Quote, it is just test data.
EventScrollBar= tk.Scrollbar(EventChoice)
EventText=tk.Text(EventChoice,height=25,width=50)
EventText.grid(row=3,column=1,columnspan=5)
EventScrollBar.config(command=EventText.yview)
EventText.config(yscrollcommand=EventScrollBar.set)
Quote=("""
...
wd""")
EventText.insert(tk.END,Quote)
EventText.config(state=tk.DISABLED)
I give you two ways of making a Scrollbar.
1) Using tk.Scrollbar
import tkinter as tk
root = tk.Tk()
EventText=tk.Text(root, height=10, width=50)
EventScrollBar= tk.Scrollbar(root, command=EventText.yview, orient="vertical")
EventScrollBar.grid(row=0, column=1, sticky="ns")
EventText.grid(row=0,column=0)
EventText.configure(yscrollcommand=EventScrollBar.set)
Quote=("""Suck\ne\ne\ne\ne\ne\ne\ne\ne\ne\nee\ne\ne\ne\ne\ne\ne\ne\nee\ned\ne\ne\nde\nd\ne\nded\nc\nc\nx\nc\nx\nc\nzc\ns\nds\nx\nwd\ns\nd\nwd""")
EventText.insert(tk.END,Quote)
root.mainloop()
2) Using ScrolledText
import tkinter as tk
from tkinter import scrolledtext
root = tk.Tk()
Quote=("""Suck\ne\ne\ne\ne\ne\ne\ne\ne\ne\nee\ne\ne\ne\ne\ne\ne\ne\nee\ned\ne\ne\nde\nd\ne\nded\nc\nc\nx\nc\nx\nc\nzc\ns\nds\nx\nwd\ns\nd\nwd""")
EventText = scrolledtext.ScrolledText(root, height=10, width=50)
EventText.insert("end", Quote)
EventText.grid(row=0, column=0)
root.mainloop()
Your code shows no attempt to grid the scrollbar.
See below example:
import tkinter as tk
root = tk.Tk()
ybar= tk.Scrollbar(root)
event_text=tk.Text(root, height=10, width=10)
ybar.config(command=event_text.yview)
event_text.config(yscrollcommand=ybar.set)
event_text.grid(row=0, column=0)
ybar.grid(row=0, column=1, sticky="ns")
for i in range(100):
event_text.insert("end", "{}\n".format(i))
root.mainloop()
Just in case you are using grid() in your original code and forgot it here in your example your problem is likely due to the columnspan=5.
If you do that to your text widget then it will sit on top of your scrollbar.
Try something like this when using columnspan:
import tkinter as tk
root = tk.Tk()
ybar= tk.Scrollbar(root)
event_text=tk.Text(root, height=10, width=10)
ybar.config(command=event_text.yview)
event_text.config(yscrollcommand=ybar.set)
event_text.grid(row=0, column=0, columnspan=5)
ybar.grid(row=0, column=5, sticky="ns")
for i in range(100):
event_text.insert("end", "{}\n".format(i))
root.mainloop()

Resizing in a grid manager tkinter

Using tkinter, I wanted to make an interface containing a few buttons on the left, which would be fairly static and align with the widgets on the right fairly nicely.
On the right, I wanted an Entry widget above a Text widget, both of which would resize accordingly (the Entry widget only on the X axis).
This code accomplishes most of that, except the Text widget does not resize and the Entry widget only resizes to align with the Text widget. Upon trying to column/rowconfigure the root, the top frame resizes awkwardly.
Here's a picture of the tkinter interface from this code:
from tkinter import *
def main():
root = Tk()
root.geometry("300x400")
framet = Frame(root)
frameb = Frame(root)
framet.grid(row=0, column=0, sticky='ew')
frameb.grid(row=1, column=0, sticky='news')
button1 = Button(framet, text='one', width=8)
button1.grid(row=0, column=0)
button2 = Button(frameb, text='two', width=8)
button2.grid(row=1, column=0, sticky='n')
entry1 = Entry(framet)
entry1.grid(row=0, column=1, sticky='ew')
text1 = Text(frameb, highlightbackground='black', highlightthickness=1)
text1.grid(row=1, column=1, sticky='news')
framet.columnconfigure(1, weight=1)
if __name__ == '__main__':
main()
As you can see, the Entry and Text widgets do not resize. How could I accomplish this whilst still having the Buttons remain static, and not moving anything (only resizing)?
Would this work for you? I changed the lines with # comments, I think, I can't really remember what I did I just tryed to get it working, one problem which I'm not happy with though is the entry widget is not the same height as the button, I guess you could manually set its height but..
from tkinter import *
def main():
root = Tk()
root.grid_columnconfigure(1,weight=1) # the text and entry frames column
root.grid_rowconfigure(0,weight=1) # all frames row
buttonframe = Frame(root)
buttonframe.grid(row=0, column=0, sticky="nswe")
entry_text_frame = Frame(root)
entry_text_frame.grid(row=0, column=1, sticky="nswe")
entry_text_frame.grid_columnconfigure(0,weight=1) # the entry and text widgets column
entry_text_frame.grid_rowconfigure(1,weight=1) # the text widgets row
button1 = Button(buttonframe, text='one', width=8)
button1.grid(row=0, column=0, sticky='nswe')
button2 = Button(buttonframe, text='two', width=8)
button2.grid(row=1, column=0, sticky='nswe')
entry1 = Entry(entry_text_frame)
entry1.grid(row=0, column=0, sticky='nswe')
text1 = Text(entry_text_frame, highlightbackground='black', highlightthickness=1)
text1.grid(row=1, column=0, sticky='news')
root.geometry("300x400")
if __name__ == '__main__':
main()

Categories

Resources