Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Strange Layout update with tables and scrollers
I have a panel with two tables (see attachment).
When you look at the panel with brawser window that is smaller than the panel (like laptop or just make the brawser windows smaller) and you have >1 tables in the panel and both have selected line (or at least had some selected line, it can be deselected at the moment, but were selected), then after some actions like mode change (setEnabled) both tables tries to display the selected line and move the whole panel layout (with windows scroller, because it is small) and actualy the last table that was refreshed moves the layout so that it is displayed.
Which cause my panel to jump and sometimes the line that i like to edit is not visible any more.
If the brawser window is big enought and both tables are visible , then this layouting is not visible to the user, nothings jump.
If I have panel with only one table, then no problem again.
If the selected lines in both tables are visible, then the layout jump is not visible as well.
We use absolut layout for all panels.
My question is what is the driving force for this? Where should I start looking?
And to be even more complex I'm not using Vaadin6 directly but after internal interfaces. So some bugs and actions could be on my side. But please give me some hints where to start looking.
See the attached video file. You will see that the first time when both selected lines are visible and I click on "ändern" (edit buton), then just the line is editable and the screen do not move at all. Then when I scroll the panel down, so that the selected line from the upper table is not visible, and again I click on edit button, then the whole screen jumps UP, so that both lines are visible, but I do not see my edit buton any more. this jump is my problem.
thanks in advance
The reason for the jump is probably that the first table gets the keyboard focus and the focus wants to be seen. The focus is indicated as a dotted box around a table row. I don't quite know why it moves the focus there, but you can use the focus() method in Component to grab the focus to some other component.
Dear Mr. Grönroos,
thank your for your hint. I will follow your advice immidiatly