0

I'm working on a text editor application using Python tkinter. I'm trying to implement a vertical scrollbar in my program which will be used to scroll down in the file. The issue is that the scrollbar widget is being displayed on the very right side of the screen and is barely visible, making it unusable. Please help. My code:

import tkinter as tk
from tkinter.filedialog import askopenfilename, asksaveasfilename

window = tk.Tk()
window.title("Text Editor")
window.configure(bg="white")
width = window.winfo_screenwidth()
height = window.winfo_screenheight()
window.geometry("%dx%d" % (width, height))


def open_file():
    file_path = askopenfilename(filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")])

    if not file_path:
        return

    text_box.delete("1.0", tk.END)

    with open(file_path, "r") as file_read:
        text = file_read.read()
        text_box.insert(tk.END, text)
    window.title(f"Text Editor - {file_path}")


def save_file():
    file_path = asksaveasfilename(defaultextension="txt", filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")])

    if not file_path:
        return

    with open(file_path, "w") as file_write:
        text = text_box.get(1.0, tk.END)
        file_write.write(text)
    window.title(f"Text Editor - {file_path}")


def font_command():
    window2 = tk.Toplevel(window)
    window2.title("Font Name")
    window2.geometry("300x150+500+200")
    text = text_box["font"]
    font_n = tk.Label(window2, text="Font:", font=("Arial Rounded MT Bold", 10))
    font_n.place(x=50, y=80)
    name_entry = tk.Entry(window2)
    name_entry.place(x=50, y=110)
    name_entry.delete(0, tk.END)
    name_entry.insert(tk.END, text)
    ok_button = tk.Button(window2, text="OK", width=8, height=2, bg="white")
    ok_button.place(x=200, y=70)
    font_size = tk.Label(window2, text="Font Size:", font=("Arial Rounded MT Bold", 10))
    font_size.place(x=50, y=20)
    size_entry = tk.Entry(window2)
    size_entry.place(x=50, y=50)
    size_entry.delete(0, tk.END)
    size_entry.insert(tk.END, text)


frame = tk.Frame(window, width=250, height=height, bd=2, relief=tk.RAISED)
frame.place(x=0, y=0)
open_b = tk.Button(frame, text="Open", width=10, height=2, bg="white", command=open_file)
open_b.place(x=70, y=20)
save_b = tk.Button(frame, text="Save As", width=10, height=2, bg="white", command=save_file)
save_b.place(x=70, y=60)
new_width = width - 300
text_box = tk.Text(window, width=new_width, height=height)
text_box.place(x=250, y=0)
scroll_bar = tk.Scrollbar(window, command=text_box.yview)
scroll_bar.pack(side=tk.RIGHT, fill=tk.Y)
text_box.configure(yscrollcommand=scroll_bar.set)
font_info = tk.Button(frame, text="Font", width=10, bg="white", height=2,
                      command=font_command)
font_info.place(x=70, y=100)


window.mainloop()

Application when I run the code: enter image description here

A big thanks to TheLizzard for the help! Updated code:

import tkinter as tk
from tkinter.filedialog import askopenfilename, asksaveasfilename

window = tk.Tk()
window.title("Text Editor")
window.configure(bg="white")
window.state("zoomed")


def open_file():
    file_path = askopenfilename(filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")])

    if not file_path:
        return

    text_box.delete("1.0", tk.END)

    with open(file_path, "r") as file_read:
        text = file_read.read()
        text_box.insert(tk.END, text)
    window.title(f"Text Editor - {file_path}")


def save_file():
    file_path = asksaveasfilename(defaultextension="txt", filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")])

    if not file_path:
        return

    with open(file_path, "w") as file_write:
        text = text_box.get(1.0, tk.END)
        file_write.write(text)
    window.title(f"Text Editor - {file_path}")


def font_command():
    window2 = tk.Toplevel(window)
    window2.title("Font Name")
    window2.geometry("300x150+500+200")
    text = text_box["font"]
    font_n = tk.Label(window2, text="Font:", font=("Arial Rounded MT Bold", 10))
    font_n.place(x=50, y=80)
    name_entry = tk.Entry(window2)
    name_entry.place(x=50, y=110)
    name_entry.delete(0, tk.END)
    name_entry.insert(tk.END, text)
    ok_button = tk.Button(window2, text="OK", width=8, height=2, bg="white")
    ok_button.place(x=200, y=70)
    font_size = tk.Label(window2, text="Font Size:", font=("Arial Rounded MT Bold", 10))
    font_size.place(x=50, y=20)
    size_entry = tk.Entry(window2)
    size_entry.place(x=50, y=50)
    size_entry.delete(0, tk.END)
    size_entry.insert(tk.END, 20)

frame = tk.Frame(window, bd=2, relief="raised")
frame.pack(side="left", fill="y")

text_box = tk.Text(window)
text_box.pack(side="left", fill="both", expand=True)

scroll_bar = tk.Scrollbar(window, command=text_box.yview)
scroll_bar.pack(side="left", fill="y")

open_b = tk.Button(frame, text="Open", command=open_file, width=6, height=2)
open_b.pack(padx=50, pady=(100, 5), anchor="n")
save_b = tk.Button(frame, text="Save As", command=save_file, width=6, height=2)
save_b.pack(padx=50, pady=5)
font_info = tk.Button(frame, text="Font", command=font_command, width=6, height=2)
font_info.pack(padx=50, pady=5)

text_box.configure(yscrollcommand=scroll_bar.set)

window.mainloop()
Roni
  • 597
  • 5
  • 21

1 Answers1

1

Try this:

import tkinter as tk
from tkinter.filedialog import askopenfilename, asksaveasfilename

# Create the window
window = tk.Tk()
window.title("Text Editor")
window.state("zoomed") # This is the proper way of making the app fullscreen

# The frame, text box and scrollbar
frame = tk.Frame(window, bd=2, relief="raised")
text_box = tk.Text(window)
scroll_bar = tk.Scrollbar(window, command=text_box.yview)

frame.pack(side="left", fill="y")
text_box.pack(side="left", fill="both", expand=True)
scroll_bar.pack(side="left", fill="y")

# Connect the text box and the scrollbar
text_box.configure(yscrollcommand=scroll_bar.set)

# The buttons
button_kwargs = dict(width=10, height=2, bg="white")
open_b = tk.Button(frame, text="Open", **button_kwargs)
save_b = tk.Button(frame, text="Save As", **button_kwargs)
font_info = tk.Button(frame, text="Font", **button_kwargs)

# The 100 is the distance from the top edge of the frame
# The 5 is the distance between the buttons in the y direction
# The 50 is the distance from both walls of the frame in the x direction
open_b.pack(padx=50, pady=(100, 5), anchor="n")
save_b.pack(padx=50, pady=5)
font_info.pack(padx=50, pady=5)

window.mainloop()

The layout looks just like what you had. I switched all of the .places for .packs because I find it easier to work with .pack. Also when using .pack you can let the widgets dictate their own size. I am also using window.state("zoomed") to make the app full-screen. For more info on how the .pack geometry manager works please look here.

Please note that I removed the functions and button's commands because this question was about putting the widgets in the right place.

TheLizzard
  • 7,248
  • 2
  • 11
  • 31
  • Thank you so much for the help! The code works just as expected and you taught me a more efficient way to make the window full screen :) – Roni Aug 11 '21 at 21:24
  • @Roni No problem. I actually found it [here](https://stackoverflow.com/a/27859694/11106801). – TheLizzard Aug 11 '21 at 21:27