List Model is not full screen

[gitpubber]

Hello, thanks for bubbletea. It's really good. I am developing TUI using bubbletea. It's search program which takes input from user and displays list. I was experimenting with prototype. I wanted to have perspective of "Pages" in bubbletea(for ex. Main Page, Search Page , List Page)

Here is the code:

main.go

package main

import (
	"fmt"
	"os"

	"github.com/charmbracelet/bubbles/list"
	"github.com/charmbracelet/bubbles/textinput"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

func main() {
	if err := tea.NewProgram(mainModel(), tea.WithAltScreen()).Start(); err != nil {
		fmt.Println("Error running program:", err)
		os.Exit(1)
	}
}

type item struct {
	title, desc string
}

func (i item) Title() string       { return i.title }
func (i item) Description() string { return i.desc }
func (i item) FilterValue() string { return i.title }

var docStyle = lipgloss.NewStyle().Margin(1, 2)

type uiState int

const (
	uiMainPage uiState = iota
	uiListPage
)

type model struct {
	uiState   uiState
	textInput textinput.Model
	myList    list.Model
	err       error
}

func mainModel() model {
	ti := textinput.New()
	ti.Focus()
	//ti.CharLimit = 156
	//ti.Width = 20

	return model{
		uiState:   uiMainPage,
		textInput: ti,
		err:       nil,
	}
}

func (m model) Init() tea.Cmd {
	switch m.uiState {
	case uiMainPage:
		return textinput.Blink
	case uiListPage:
		return nil
	}
	return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch m.uiState {
	case uiMainPage:
		switch msg := msg.(type) {
		case tea.KeyMsg:
			switch msg.Type {
			case tea.KeyCtrlC, tea.KeyEsc:
				return m, tea.Quit
			case tea.KeyEnter:
				items := []list.Item{
					item{title: "Raspberry Pi’s", desc: "I have ’em all over my house"},
					item{title: "Nutella", desc: "It's good on toast"},
					item{title: "Bitter melon", desc: "It cools you down"},
					item{title: "Nice socks", desc: "And by that I mean socks without holes"},
					item{title: "Eight hours of sleep", desc: "I had this once"},
					item{title: "Cats", desc: "Usually"},
					item{title: "Plantasia, the album", desc: "My plants love it too"},
					item{title: "Pour over coffee", desc: "It takes forever to make though"},
					item{title: "VR", desc: "Virtual reality...what is there to say?"},
					item{title: "Noguchi Lamps", desc: "Such pleasing organic forms"},
					item{title: "Linux", desc: "Pretty much the best OS"},
					item{title: "Business school", desc: "Just kidding"},
					item{title: "Pottery", desc: "Wet clay is a great feeling"},
					item{title: "Shampoo", desc: "Nothing like clean hair"},
					item{title: "Table tennis", desc: "It’s surprisingly exhausting"},
					item{title: "Milk crates", desc: "Great for packing in your extra stuff"},
					item{title: "Afternoon tea", desc: "Especially the tea sandwich part"},
					item{title: "Stickers", desc: "The thicker the vinyl the better"},
					item{title: "20° Weather", desc: "Celsius, not Fahrenheit"},
					item{title: "Warm light", desc: "Like around 2700 Kelvin"},
					item{title: "The vernal equinox", desc: "The autumnal equinox is pretty good too"},
					item{title: "Gaffer’s tape", desc: "Basically sticky fabric"},
					item{title: "Terrycloth", desc: "In other words, towel fabric"},
				}

				m.myList = list.New(items, list.NewDefaultDelegate(), 0, 0)
				m.myList.Title = "My Fave Things"
				m.uiState = uiListPage
				var cmd tea.Cmd
				m.myList, cmd = m.myList.Update(msg)
				return m, cmd
			}
		}

		var cmd tea.Cmd
		m.textInput, cmd = m.textInput.Update(msg)
		return m, cmd
	case uiListPage:
		switch msg := msg.(type) {
		case tea.KeyMsg:
			if msg.String() == "ctrl+c" {
				return m, tea.Quit
			}
		case tea.WindowSizeMsg:
			top, right, bottom, left := docStyle.GetMargin()
			m.myList.SetSize(msg.Width-left-right, msg.Height-top-bottom)
		}

		var cmd tea.Cmd
		m.myList, cmd = m.myList.Update(msg)
		return m, cmd

	default:
		return m, nil
	}
}

func (m model) View() string {
	switch m.uiState {
	case uiMainPage:
		return fmt.Sprintf(
			"Search: \n\n%s\n\n%s",
			m.textInput.View(),
			"(esc to quit)",
		) + "\n"
	case uiListPage:
		return docStyle.Render(m.myList.View())
	default:
		return ""
	}
}

Problem is that list only shows one element(unless terminal is resized) whereas i wanted it to be fullscreen.

This is what I wanted:

This is what I get:

Only one element is displayed.

Please help me.

[muesli]

At first glance it looks like your list simply doesn't have the right dimensions because it never receives an initial tea.WindowSizeMsg. I assume resizing your terminal would make the list snap back to an appropriate size?

If you want to dynamically initialize the list you would have to remember the last tea.WindowSizeMsg in your model and call m.myList.SetSize after creating the list.

[gitpubber]

@muesli , Yeah. That was the problem. I saved WindowSizeMsg as state in model. while switching to listview,I set it. Now,it's properly working.

But,it would be nicer if listview automatically does this though.

[mrusme]

Hopping on this discussion as I'm noticing something odd in regard of the list sizing. I'm not sure (yet) if I'm correct with this obsevation but if one uses a lipgloss.NewStyle() to Render(list.View() it seems that the width is being disregarded. On the code that I'm currently working on the list dimensions were set using list.SetSize(). While the height is being preserved, I can't seem to be getting the width correct unless I apply the Width specifically to the NewStyle - which in my case doesn't work as I'm using it across multiple lists with different dimensions.