How to make Elements in a vbox scroll, as the number of elements exceeds what can be displayed on the screen

[VedantParanjape]

Reference code: https://github.com/VedantParanjape/simpPRU/blob/ad3d0fb804aa7a0b3585906a36b73e6be75f5348/src/console/console.cpp#L147

https://asciinema.org/a/SYtxNwZLMhx6OBQKs2ohPyWRx

Please take a look at this video, when vbox is completely filled, adding new elements, doesn't display them, can we do something like it scrolls down like in a terminal.

[ArthurSonzogni]

Yes, this is already built in. You have to wrap your element inside the "frame" decorator. (Or xframe, yframe)

There is an example here: https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/checkbox_in_frame.cpp

This is declared by: https://github.com/ArthurSonzogni/FTXUI/blob/a4d72c4d508b429cd733eda42034e71ac0e10594/include/ftxui/dom/elements.hpp#L84

[VedantParanjape]

Hey, https://asciinema.org/a/929mFrhSQZkVCP0UCCCQFwpDS

i did this

hbox({
                    hflow({
                        vbox({
                            output_box | frame,
                        }),
                    }) | border,

It doesn't work

[ArthurSonzogni]

It needs to know where to focus the view. You need to decorate the focused element using 'select' or 'focus' That's what the implementation of every component are using, for instance RadioBox.cpp

[ArthurSonzogni]

You could write:

vbox({
  vbox(output_box),
  text(L"") | select
}) | frame | border

[VedantParanjape]

Still doesn't seem work.

Video: https://asciinema.org/a/XPPcnKs1efbpS91SKn9c9jpk1 Here's the UI screenshot: https://imgur.com/a/aXlEeiE Here's my complete render function call

Element Render() override 
        {
            return border(vbox({
                // Console and PRU selection
                hbox({
                    hflow({
                        vbox({
                            vbox(output_box),
                            text(L"") | ftxui::focus,
                            }) | frame | border,
                    }) | border,

                    vbox({
                        hcenter(bold(text(L"PRU"))),
                        separator(),
                        right_menu.Render(),
                    }) | border,
                }) | flex,

                // Input box and PRU start/stop
                vbox({
                    hbox({
                        text(L" send : "),
                        input_box.Render(),
                        separator(),
                        pru_start_top.Render(),
                    }),
                }) | border,
            }));
        }

[ArthurSonzogni]

It is because in your code, you selected every elements. Only one needs to be selected, otherwise it won't know which one to select. You need to remove "select" here: https://github.com/VedantParanjape/simpPRU/blob/ad3d0fb804aa7a0b3585906a36b73e6be75f5348/src/console/console.cpp#L183

In your code, I replaced:

hflow({
  vbox({
      output_box ,
  }),
}) | border,

by:

vbox({
    vbox({output_box}),
    text(L"...") | ftxui::select,
}) | frame | border,

and it was correctly working.

[VedantParanjape]

It is because in your code, you selected every elements. Only one needs to be selected, otherwise it won't know which one to select. You need to remove "select" here: https://github.com/VedantParanjape/simpPRU/blob/ad3d0fb804aa7a0b3585906a36b73e6be75f5348/src/console/console.cpp#L183

Damn, I'm an idiot. I don't even know how that select got there 😭

That code you provided just did the job, thanks for the help buddy. I'll close the issue.

I am using this in my google summer of code project, can you add this project to README, "projects made using" section: https://github.com/VedantParanjape/simpPRU

Thanks and Regards, Vedant Paranjape