[GH-ISSUE #76] [Proposal] Scroll Containers #785

Closed
opened 2026-03-14 08:33:31 +03:00 by kerem · 6 comments
Owner

Originally created by @ReverseGem7 on GitHub (Aug 25, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/76

Summary

Currently, there is no straightforward way to determine the height and width of a rendered child element in the terminal renderer. The only way to get it is to calculate the size of each component manually using measureText or stringWidth. This proposal suggests adding a utility function that calculates these dimensions automatically based on content and wrapping rules.

Motivation

Knowing the exact size of a child element is necessary for:

  • Implementing scroll areas correctly.
  • Dynamic calculations.
  • Reducing error-prone manual measurements, especially for complex layouts.
Originally created by @ReverseGem7 on GitHub (Aug 25, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/76 ## Summary Currently, there is no straightforward way to determine the height and width of a rendered child element in the terminal renderer. The only way to get it is to calculate the size of each component manually using `measureText` or `stringWidth`. This proposal suggests adding a utility function that calculates these dimensions automatically based on content and wrapping rules. ## Motivation Knowing the exact size of a child element is necessary for: - Implementing scroll areas correctly. - Dynamic calculations. - Reducing error-prone manual measurements, especially for complex layouts.
kerem 2026-03-14 08:33:31 +03:00
Author
Owner

@kommander commented on GitHub (Aug 25, 2025):

I want to provide a ScrollContainer renderable for exactly that. Yoga nodes can have an overflow set to scroll, but only in the main axis direction of the container (column/row), so for scroll in both directions one needs a nested container setup and handle that. With overflow set, yoga provides the content size by letting the first level container grow it's layout naturally across the main axis as if there were no boundaries. So we can take the sub container dimensions and handle a scrollOffset in the scrollable root and set x/y accordingly. Combining that with a framebuffer that only has the clipping dimensions (buffered=true in scroll root), that will only draw elements that are within the clipping area. As buffer draws already check bounds, it will just not draw elements that are out of bounds and performance should come with it automatically.

<!-- gh-comment-id:3220483739 --> @kommander commented on GitHub (Aug 25, 2025): I want to provide a ScrollContainer renderable for exactly that. Yoga nodes can have an `overflow` set to `scroll`, but only in the main axis direction of the container (column/row), so for scroll in both directions one needs a nested container setup and handle that. With overflow set, yoga provides the content size by letting the first level container grow it's layout naturally across the main axis as if there were no boundaries. So we can take the sub container dimensions and handle a scrollOffset in the scrollable root and set x/y accordingly. Combining that with a framebuffer that only has the clipping dimensions (buffered=true in scroll root), that will only draw elements that are within the clipping area. As buffer draws already check bounds, it will just not draw elements that are out of bounds and performance should come with it automatically.
Author
Owner

@msmps commented on GitHub (Aug 25, 2025):

As a side note for the interim - you can grab the dimensions by using refs in solid/react and directly in core

Image
<!-- gh-comment-id:3220504328 --> @msmps commented on GitHub (Aug 25, 2025): As a side note for the interim - you can grab the dimensions by using refs in solid/react and directly in core <img width="2380" height="2294" alt="Image" src="https://github.com/user-attachments/assets/6d87eecf-d118-4ffb-8cae-46e19efddd5b" />
Author
Owner

@ReverseGem7 commented on GitHub (Aug 25, 2025):

As a side note for the interim - you can grab the dimensions by using refs in solid/react and directly in core

Image

It works for height, but for width it seems they aren’t calculating the actual width.

Image
<!-- gh-comment-id:3220963002 --> @ReverseGem7 commented on GitHub (Aug 25, 2025): > As a side note for the interim - you can grab the dimensions by using refs in solid/react and directly in core > > <img alt="Image" width="2000" height="2000" src="https://private-user-images.githubusercontent.com/7691252/481663687-6d87eecf-d118-4ffb-8cae-46e19efddd5b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTYxMzk4MTEsIm5iZiI6MTc1NjEzOTUxMSwicGF0aCI6Ii83NjkxMjUyLzQ4MTY2MzY4Ny02ZDg3ZWVjZi1kMTE4LTRmZmItOGNhZS00NmUxOWVmZGRkNWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDgyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA4MjVUMTYzMTUxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Zjc1YjAyN2NkOWViMTM3M2Y2N2I3NWZlZWE3OWFkNTA0ODY2ZTg0YmI3MDQ4NDAzZjM1NzNhNmY4MjdhYjg3ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.QEFwqbN_dLNzWiMAQWC9oIvtmCFdjyddJN4lrxsXGcI"> It works for height, but for width it seems they aren’t calculating the actual width. <img width="1857" height="908" alt="Image" src="https://github.com/user-attachments/assets/8e66c12b-17f9-42d1-9ac9-712b930eed97" />
Author
Owner

@kommander commented on GitHub (Aug 25, 2025):

It is calculating the width, but the width of the node within the layout and the boundary is the terminal. That's the measure function in the TextRenderable, which is called by yoga layout. It does not respect any overflow settings yet.

<!-- gh-comment-id:3221286478 --> @kommander commented on GitHub (Aug 25, 2025): It is calculating the width, but the width of the node within the layout and the boundary is the terminal. That's the measure function in the TextRenderable, which is called by yoga layout. It does not respect any overflow settings yet.
Author
Owner

@ReverseGem7 commented on GitHub (Aug 25, 2025):

Oh, thanks for the explanation

<!-- gh-comment-id:3221428449 --> @ReverseGem7 commented on GitHub (Aug 25, 2025): Oh, thanks for the explanation
Author
Owner

@ReverseGem7 commented on GitHub (Sep 3, 2025):

Was solved in https://github.com/sst/opentui/pull/120 and https://github.com/sst/opentui/pull/125

<!-- gh-comment-id:3250327371 --> @ReverseGem7 commented on GitHub (Sep 3, 2025): Was solved in https://github.com/sst/opentui/pull/120 and https://github.com/sst/opentui/pull/125
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/opentui#785
No description provided.