About “position” of a page; or page "jump"

Support
#1

Please see the attached gif, I have a page with an add button and a delete button, they are used to add a row to page or delete a row.
After user click add or delete, I don’t want the page “jump” after user add or click.

gif

My source code is like below:

        Component ans = copyTmpObject(component, exampleRow, editGrid, componentsFactory);
        int max = 0;
        for (Component com : editGrid.getComponents()) {
            if (com == null || com.getId() == null) {
                continue;
            }

            if (com.getId().startsWith("livedRow")) {
                int x = Integer.valueOf(com.getId().substring(8));
                max = x > max ? x : max;
            } else if (com.getId().startsWith("lived")) {
                int x = Integer.valueOf(com.getId().substring(5));
                max = x > max ? x : max;
            }
        }
        if (ans != null) {
            ans.setId("livedRow" + String.valueOf(max + 1));
        }
        editGrid.add(ans);
#3

Hello, @anjingjing

Could you share sample project with your case? It will help us to investigate a problem that you met with.

Regards,
Daniil.

#5

Hi Daniil,
Sorry for long time no reply, was busy in other things, I did not create the sample project yet. Maybe I can ask in this way:
I have a scrollbox, scrollbox containing a grid, and I am using createComponent to dynamically add new components to a grid while user click a button, I want the new row added to the grid to show in the middle of the web page, how to?

Currently, I try to use requestFocus() method, it does not make the new row to show in middle of the page.

#6

First of all the requestFocus() method forces the page to scroll. Is this behavior still observed without calling it?

Also you can try to manually update the scroll position of ScrollBox:

scrollBox.unwrap(CubaScrollBoxLayout.class).setScrollTop(...);

Regards,
Daniil.

#7

By remove below style (overflow-x), the problem gone.
.c-scrollbox-content{
overflow-x:auto !important;
}

We can’t figure out why but maybe that style makes browser to do something when layout content changes.

1 Like