Questions about viewport

[mistakenelf]

• Maybe im not going about this the correct way but im working on a file manager just for fun here https://github.com/knipferrc/fm. Trying to figure out how to implement the viewport and its somewhat working but I have a couple issues.

1. ) Whenever I check if m.ready inside the view, it just sits in a loading state infinitely. Maybe im not initializing something correctly?

case tea.WindowSizeMsg:
		if !m.ready {
			m.screenwidth = msg.Width
			m.screenheight = msg.Height
			m.viewport = viewport.Model{
				Width:  msg.Width,
				Height: msg.Height - 1,
			}
			m.viewport.YPosition = 0
			m.ready = true
		} else {
			m.screenwidth = msg.Width
			m.screenheight = msg.Height
			m.viewport.Width = msg.Width
			m.viewport.Height = msg.Height - 1
		}

2. ) Whenever I call viewport.LineUp or LineDown it seems to take no effect on the viewport? Attempting to get it so that you can scroll through your directly tree when the height goes outside the terminal

Any help is much appreciated

[meowgorithm]

Hi! To help answer you we'll need a little more context. Can you link to the relevant parts in your source code?

[mistakenelf]

Sure thing, so I have a model with a ready field on it as well as the viewport component defined in here https://github.com/knipferrc/fm/blob/main/src/model.go. Then inside update.go https://github.com/knipferrc/fm/blob/main/src/update.go I listen for the windowSizeMsg and then run the code in the above comment. The issue comes into play when I add a check inside here https://github.com/knipferrc/fm/blob/main/src/view.go.

so if I add

if !m.ready {
  return "Loading..."
}

It just stays in a loading state and never runs anything else unless I press a key

[meowgorithm]

Okay cool. I'm able to replicate both problems, but not able to tell why yet.

I don't think Bubble Tea or the Viewport is the culprit here. For reference, here's a quick example that shows both a model.ready being set when a tea.WindowSizeMsg arrives and viewport.Model.LineUp/LineDown working correctly.

https://gist.github.com/meowgorithm/8631017bddd592e4336bba4576bbfde5

Side note: I see a lot of fileStatus messages coming in (around 1 every millisecond) when the view appears to be idle. That's not the cause; more just a heads up.

[mistakenelf]

Maybe something in my init is incorrect. I tried moving the getDirectoryListing from init.go to main.go like the gist but seems like viewport content was not getting set because it just rendered blank

[mistakenelf]

Actually I think I got it all working now. Thank you again for the help! Much appreciated

[meowgorithm]

Good to hear!

[meowgorithm]

Okay, so for the viewport:

viewport.SetContent mutates the viewport model, and thus it should only be used in an Update. In this case viewport is being altered updated in your View function and is almost certainly getting confused about its contents.

• https://github.com/knipferrc/fm/blob/main/src/view.go#L20
• https://github.com/knipferrc/fm/blob/main/src/view.go#L24

[meowgorithm]

As for the m.ready issue, it turns out there was a bug in Lip Gloss related to the first render of a lipgloss.AdaptiveColor that caused a race of sorts. We've just released a bugfix for that (thanks to you). If you upgrade to Lip Gloss v0.1.3 that problem should vanish.

I'd also recommend updating to Bubble Tea v0.13.2.

[mistakenelf]

Awesome, m.ready works now! Much appreciated

[kinthaiofficial]

Viewport scrolling in Bubble Tea has a few subtleties worth knowing about:

The viewport.Model basics:

import "github.com/charmbracelet/bubbles/viewport"

// In your model
type Model struct {
    viewport viewport.Model
    content  string
}

// In Init
func (m Model) Init() tea.Cmd {
    m.viewport = viewport.New(width, height)
    m.viewport.SetContent(m.content)
    return nil
}

// In Update - pass KeyMsg to viewport
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.KeyMsg:
        var cmd tea.Cmd
        m.viewport, cmd = m.viewport.Update(msg)
        return m, cmd
    }
    return m, nil
}

Common viewport issues:

Size initialization timing: The viewport needs to know its size at init time, but the terminal size is typically received via a tea.WindowSizeMsg. Initialize with width=0, height=0 and resize in the tea.WindowSizeMsg handler.

Content updates: After calling SetContent(), the viewport doesn't automatically scroll to the bottom. If you want "follow last output" behavior (like a tail -f), call m.viewport.GotoBottom() after SetContent().

Scrollbar rendering: The viewport's HighPerformanceRendering flag affects whether scrollbars are drawn. For long content lists, this makes a visible difference.

Mouse scrolling: Enable via m.viewport.MouseWheelEnabled = true in your Init/Update.

What specific scrolling behavior are you seeing issues with?

[kinthaiofficial]

The viewport model in Bubbletea has a few behaviors that trip people up. A few clarifications:

Viewport height vs content height
The viewport has a fixed display height (set via viewport.New(width, height)). The content can be taller — the viewport tracks the scroll position and renders only the visible slice.

vp := viewport.New(80, 24)  // display: 24 lines
vp.SetContent(longContent)   // content: might be 1000 lines
vp.GotoBottom()              // scroll to bottom

Update loop integration
The viewport needs to receive WindowSizeMsg to know its display dimensions, and KeyMsg for scroll navigation. A common mistake is forgetting to handle these in the parent model:

func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.WindowSizeMsg:
        m.viewport.Width = msg.Width
        m.viewport.Height = msg.Height - headerHeight
    case tea.KeyMsg:
        m.viewport, cmd = m.viewport.Update(msg)
    }
    return m, cmd
}

Setting content dynamically
If you update content after initialization, call vp.SetContent(newContent) — this resets the scroll position to top unless you save and restore it. For streaming content (like a log tail), append to content and call GotoBottom() to follow new lines.

AtTop/AtBottom helpers
vp.AtBottom() returns true when the user has scrolled to the bottom. Useful for deciding when to auto-scroll (follow mode) vs when to respect manual scroll position.

What's the specific behavior you're trying to achieve — a scrollable log view, a pageable document, or something else?