[GH-ISSUE #994] How to make a popup box #719

New issue

Closed

opened 2026-03-04 01:07:15 +03:00 by kerem · 2 comments

kerem commented

2026-03-04 01:07:15 +03:00

Owner

Originally created by @benstigsen on GitHub (May 28, 2024).
Original GitHub issue: https://github.com/rivo/tview/issues/994

It is unclear to me how you create something like a popup box that contains elements like text, buttons, input fields and so on.

I currently have a list of items like this:

package main

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

func main() {
    list := tview.NewList()
    list.AddItem("Item 1", "", 0, func() {
        // open box with elements on top of the list, but still showing the list in the background
    })
    if err := tview.NewApplication().SetRoot(list, true).Run(); err != nil {
        panic(err)
    }
}

How I make something appear on top of what's already there is very unclear to me. Pages seems to be the way to do it, but I just don't get how.

Originally created by @benstigsen on GitHub (May 28, 2024). Original GitHub issue: https://github.com/rivo/tview/issues/994 It is unclear to me how you create something like a popup box that contains elements like text, buttons, input fields and so on. I currently have a list of items like this: ```go package main import ( "github.com/rivo/tview" ) func main() { list := tview.NewList() list.AddItem("Item 1", "", 0, func() { // open box with elements on top of the list, but still showing the list in the background }) if err := tview.NewApplication().SetRoot(list, true).Run(); err != nil { panic(err) } } ``` How I make something appear _on top_ of what's already there is very unclear to me. Pages seems to be the way to do it, but I just don't get _how_. ![image](https://github.com/rivo/tview/assets/24865450/7c9708a3-7733-4c44-ae60-f4275ef637ee)

kerem closed this issue

2026-03-04 01:07:15 +03:00

kerem commented

2026-03-04 01:07:16 +03:00

Author

Owner

@sjsanc commented on GitHub (May 29, 2024):

The second example in the modals primitive wiki page can be modified to achieve this effect.

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

func main() {
	app := tview.NewApplication()

	modal := func(p tview.Primitive, width, height int) tview.Primitive {
		return tview.NewFlex().
			AddItem(nil, 0, 1, false).
			AddItem(tview.NewFlex().SetDirection(tview.FlexRow).
				AddItem(nil, 0, 1, false).
				AddItem(p, height, 1, true).
				AddItem(nil, 0, 1, false), width, 1, true).
			AddItem(nil, 0, 1, false)
	}

	pages := tview.NewPages()

	button := tview.NewButton("Close modal").SetSelectedFunc(func() {
		pages.RemovePage("modal")
	})

	list := tview.NewList().
		AddItem("Open Modal", "Click top open modal", '1', func() {
			pages.AddPage("modal", modal(button, 40, 10), true, true)
		}).
		AddItem("Quit", "Press to exit", 'q', func() {
			app.Stop()
		})

	pages.AddPage("main", list, true, true)

    if err := app.SetRoot(pages, true).Run(); err != nil {
        panic(err)
    }
}

@sjsanc commented on GitHub (May 29, 2024): The second example in the [`modals` primitive wiki page](https://github.com/rivo/tview/wiki/Modal ) can be modified to achieve this effect. ```go import ( "github.com/rivo/tview" ) func main() { app := tview.NewApplication() modal := func(p tview.Primitive, width, height int) tview.Primitive { return tview.NewFlex(). AddItem(nil, 0, 1, false). AddItem(tview.NewFlex().SetDirection(tview.FlexRow). AddItem(nil, 0, 1, false). AddItem(p, height, 1, true). AddItem(nil, 0, 1, false), width, 1, true). AddItem(nil, 0, 1, false) } pages := tview.NewPages() button := tview.NewButton("Close modal").SetSelectedFunc(func() { pages.RemovePage("modal") }) list := tview.NewList(). AddItem("Open Modal", "Click top open modal", '1', func() { pages.AddPage("modal", modal(button, 40, 10), true, true) }). AddItem("Quit", "Press to exit", 'q', func() { app.Stop() }) pages.AddPage("main", list, true, true) if err := app.SetRoot(pages, true).Run(); err != nil { panic(err) } } ``` ![2024-05-29_14-23](https://github.com/rivo/tview/assets/52794806/ea264e53-dffb-48ae-ba43-260c6ac7912f)

kerem commented

2026-03-04 01:07:16 +03:00

Author

Owner

@benstigsen commented on GitHub (May 29, 2024):

Yep that works, thank you!

@benstigsen commented on GitHub (May 29, 2024): Yep that works, thank you!

kerem referenced this issue

2026-03-04 01:09:04 +03:00

[PR #719] [CLOSED] Fix AddDropDown #1025