Scrollable Frame in LiveBook?

Elixir Framework Forums Livebook Forum
,
1

Is there a way to assign a maximum height to a Kino.Frame, beyond which it would become scrollable? I have a (very) long form, which I would like to display in a scrollable frame rather than making the page extremely tall.

2

Hey @cd-slash, there’s no API to do that at the moment, but I’ve just added it on Livebook and Kino main : ) Add :max_height option for Kino.Layout.grid/2 by jonatanklosko · Pull Request #479 · livebook-dev/kino · GitHub

2 Likes
3

Amazing! Great solution - putting the max height option on Kino.Layout.grid/2 is much nicer than making the frame itself scrollable. Thanks!

4

Do I need to do anything beyond specifying the :max_height option to get this to limit the height of the grid? I have pulled the code from the repo with Mix.install([{:kino, git: "https://github.com/livebook-dev/kino", branch: "main"}]) and it allows me to specify :max_height, but the scrolling does not seem to be working. Test code example is much taller than 50px but does not scroll:

Kino.Layout.grid(
  [
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world"),
    Kino.Text.new("hello"),
    Kino.Text.new("world")
  ],
  max_height: 50
)
5

@cd-slash you need to use Livebook main as well for now : )

1 Like