Possibility to scroll to bottom position in a scrollbox through code?

Hi,

Is it possible to scroll to a certain component in a scroll box layout through code? I have a form that contains a lot of components and want the option to scroll to the bottom of the form either by default or by clicking a button.

Is something like that possible? I tried the requestFocus() method but although the component at the bottom gets the focus, the scrolling does not take place.

Any suggestions?
-b

Hello @b.tel

it is possible for screens located in web module.

First of all you have to unwrap component and set delayed mode:

CubaScrollBoxLayout cScrollBox = unwrapComposition(CubaScrollBoxLayout.class);

cScrollBox.setDelayed(true);

Then use setScrollTop(int position) method:

cScrollBox.setScrollTop(1000);

Regards,
Daniil.

Hello Daniil,

Thanks - this really helps me. I guess the position is in pixels? How would I know what size the layout has and thus be able to scroll to the bottom?

-b

Yes, under the hood it sets scrollTop property for a HTML Element: MDN.

Hi Daniil,

Thanks for the support - works perfectly!

-b

Hi Daniil,

Thanks for the provided solution,

CubaScrollBoxLayout cubaScrollBoxLayout = scrollBox.unwrap(CubaScrollBoxLayout.class); // unwrapComposition too
cubaScrollBoxLayout.setDelayed(true);
cubaScrollBoxLayout.setScrollTop(100);

is not working in my case to dynamically scroll down to the end text area. I need to scroll down dynamically every time not only in afterInit, is it possible to do so?

am I doing something wrong?

Thanks in advance

Hi,

Where did you place the code? I added it to a button but it could also be linked to a proper event (e.g. afterShowEvent).

Regards
-b

Hi,

It is placed in onClick handler of a button and still not working somehow. I also tried to put it in places where my richTextArea updates with no luck.

To add a bit of context, the height of richTextArea is fixed (300 px) so that scroll box automatically needs to scroll till the end.

FYI, I am using cuba version of ‘7.2.1’.

Thanks,
Best.

Hi,

The code from this topic is aimed at controlling a ScrollBoxLayout, not a RichTextArea which I do not expect includes a ScrollBoxLayout at all.

I think it could work however if you set the height of the RichTextArea to auto and place the RichTextArea within a ScrollBoxLayout with a height of 300px. The button should then control the ScrollBoxLayout.

This poses some new problems however as the toolbar buttons of the RichTextArea will scroll out of view. I guess it still needs to be editable, correct? Otherwise a Label with HTML formatting could do as well.

Regards,
-b

Hi, thanks for your fast response,

RichTextArea placed in ScrollBoxLayout works quite well when the user is scrolling by themselves but scrolling through the code does not work at all.

Many thanks for your answer, I got the point. I tried to put all the texts in one RichTextArea whereas scroll works only when it is a direct child of ScrollBoxLayout. So, either I need to put every text in different Label or RichTextArea or have to find a way to scroll through one TextArea.

Thanks again for dedicating time

Hi,

I would suggest to put every text in a label (which is the most ‘lite’ solution) with HTML enabled. Scrolling would then work as expected I guess.

Good luck with the final solution ! :wink:

Regards,
-b

Hello Berend,

did you get an answer to the question how to find out the layout size and the position of the component on the screen?

Regards
Michael

Hi Mike,

No I did not. I solved my specific question by scrolling to either the bottom using a huge value or top using 0:

    /**
     * Called from link buttons on messages scroll area that holds all messages.
     * Scroll to the top (first message) or bottom (last message).
     * Then disables itself and enables the other link button.
     */
    public void scrollToTop() {
        top.setVisible(true);
        bottom.setVisible(false);

        CubaScrollBoxLayout cScrollBox = scroll.unwrapComposition(CubaScrollBoxLayout.class);
        cScrollBox.setDelayed(true);
        cScrollBox.setScrollTop(0);
    }

    public void scrollToBottom() {
        bottom.setVisible(true);
        top.setVisible(false);

        CubaScrollBoxLayout cScrollBox = scroll.unwrapComposition(CubaScrollBoxLayout.class);
        cScrollBox.setDelayed(true);
        cScrollBox.setScrollTop(100000);
    }

Hope that helps.

Regards,
-b

Hello,

thanks a lot for your reply. That did not solve my problem, but I have no a good solution in my dev tool case!

My challenge was/is, that I have an varying list of fragements (search results) on a result page and a detail page. When the user jumps back from the detail page to the result list, I want to bring the last viewed item into position. The challenges is, that I have not a scrollbox element on the result list page (only an with components in.

My solution ist to store the last viewed element as a session attribute and if the result list is shown I use getFragment().focusFirstComponent(). And I do this at the component that is comming directly after the one I want to have insight (otherwise only the top of the fragment is shown).

Best regards
Michael

Hi.

Interesting solution as well. If your list of fragments is contained in a table, you could also consider a scrollTo() e.g.:

table.scrollTo(table.getSingleSelected());

Regards
-b