[GH-ISSUE #649] How to add a `tview.Button` inside a `tview.NewBox` #475

New issue

Closed

opened 2026-03-04 01:05:20 +03:00 by kerem · 2 comments

kerem commented

2026-03-04 01:05:20 +03:00

Owner

Originally created by @davidpatters0n on GitHub (Sep 16, 2021).
Original GitHub issue: https://github.com/rivo/tview/issues/649

I've created the following view, the intention is to add some buttons to the navigation section.

┌──────List notes──────┐┌──────────────────────────────Navigation──────────────────────────────┐
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      │└──────────────────────────────────────────────────────────────────────┘
│                      │┌────────────────────────Pane for creating note────────────────────────┐
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
│                      ││                                                                      │
└──────────────────────┘└──────────────────────────────────────────────────────────────────────┘

The layout for the application follows:

package main

import (
	"github.com/rivo/tview"
)

func main() {
	app := tview.NewApplication()
	flex := tview.NewFlex().
		AddItem(tview.NewBox().SetBorder(true).SetTitle("List notes"), 0, 1, false).
		AddItem(tview.NewFlex().SetDirection(tview.FlexRow).
			AddItem(tview.NewBox().SetBorder(true).SetTitle("Navigation"), 5, 2, false).
			AddItem(tview.NewBox().SetBorder(true).SetTitle("Pane for creating note"), 0, 1, false), 0, 3, false)
	if err := app.SetRoot(flex, true).Run(); err != nil {
		panic(err)
	}
}

Essentially what I was hoping I could do was set a tview.Button() inside a tviewBox. Or should the application be structured in a different way?

Originally created by @davidpatters0n on GitHub (Sep 16, 2021). Original GitHub issue: https://github.com/rivo/tview/issues/649 I've created the following view, the intention is to add some buttons to the navigation section. ``` ┌──────List notes──────┐┌──────────────────────────────Navigation──────────────────────────────┐ │ ││ │ │ ││ │ │ ││ │ │ │└──────────────────────────────────────────────────────────────────────┘ │ │┌────────────────────────Pane for creating note────────────────────────┐ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ └──────────────────────┘└──────────────────────────────────────────────────────────────────────┘ ``` The layout for the application follows: ```go package main import ( "github.com/rivo/tview" ) func main() { app := tview.NewApplication() flex := tview.NewFlex(). AddItem(tview.NewBox().SetBorder(true).SetTitle("List notes"), 0, 1, false). AddItem(tview.NewFlex().SetDirection(tview.FlexRow). AddItem(tview.NewBox().SetBorder(true).SetTitle("Navigation"), 5, 2, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Pane for creating note"), 0, 1, false), 0, 3, false) if err := app.SetRoot(flex, true).Run(); err != nil { panic(err) } } ``` Essentially what I was hoping I could do was set a `tview.Button()` inside a `tviewBox`. Or should the application be structured in a different way?

kerem closed this issue

2026-03-04 01:05:20 +03:00

kerem commented

2026-03-04 01:05:20 +03:00

Author

Owner

@rivo commented on GitHub (Sep 27, 2021):

There are multiple ways but the simplest is probably to add a Form, since a form can hold buttons. A Box doesn't really do anything. It's just a superclass for all the other primitives.

package main

import (
	"github.com/rivo/tview"
)

func main() {
	app := tview.NewApplication()
	form := tview.NewForm().AddButton("Close the app", func() {
		app.Stop()
	})
	form.SetBorder(true).SetTitle("Navigation")
	flex := tview.NewFlex().
		AddItem(tview.NewBox().SetBorder(true).SetTitle("List notes"), 0, 1, false).
		AddItem(tview.NewFlex().SetDirection(tview.FlexRow).
			AddItem(form, 5, 2, false).
			AddItem(tview.NewBox().SetBorder(true).SetTitle("Pane for creating note"), 0, 1, false), 0, 3, false)
	if err := app.SetRoot(flex, true).EnableMouse(true).Run(); err != nil {
		panic(err)
	}
}

@rivo commented on GitHub (Sep 27, 2021): There are multiple ways but the simplest is probably to add a [`Form`](https://pkg.go.dev/github.com/rivo/tview#Form), since a form can hold buttons. A `Box` doesn't really do anything. It's just a superclass for all the other primitives. ```go package main import ( "github.com/rivo/tview" ) func main() { app := tview.NewApplication() form := tview.NewForm().AddButton("Close the app", func() { app.Stop() }) form.SetBorder(true).SetTitle("Navigation") flex := tview.NewFlex(). AddItem(tview.NewBox().SetBorder(true).SetTitle("List notes"), 0, 1, false). AddItem(tview.NewFlex().SetDirection(tview.FlexRow). AddItem(form, 5, 2, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Pane for creating note"), 0, 1, false), 0, 3, false) if err := app.SetRoot(flex, true).EnableMouse(true).Run(); err != nil { panic(err) } } ```

kerem commented

2026-03-04 01:05:20 +03:00

Author

Owner

@davidpatters0n commented on GitHub (Oct 1, 2021):

👍🏽 - This solves the issue I was facing.

@davidpatters0n commented on GitHub (Oct 1, 2021): 👍🏽 - This solves the issue I was facing.