So I have this issue with Vaadin Flow 14, I have a component that uses both position: static and position: absolute in it's CSS. It also have a cool animation and I needed to use both positions so it doesn't look weird, can take all the screen and can also be scrollable.
It's behavior is the following:
- Component start with
position: staticin its CSS file (can be scrollable) - Click on the component and set
position: absolutewith the method getStyle().set() and it takes all the window - Close the component and it goes back to
position: staticso it can be within it's parent and be scrollable
The problem is in Step 3. I set the position: static by removing the absolute with getStyle().remove(). I'm doing that from another thread so I can remove the style after the animation is done, in that way it doesn't look weird, has the same flow as when the component was opened and doesn't have that jump cut in it.
The style is removed from the component, however it isn't updated instantly and the component can't be scrolled because it's position is still absolute. However if I click on a link to go to another new tab and go back to the main tab it is now updated and the component is in a static position.
I tried to resolve this by adding @Push on my main class but is doesn't work because I have views inside views and this is a custom component from one of the nested views and it isn't in the main class. I have to be able to update it from the component itself just the way I'm removing the style. I just want the component to wait until the animation is played and THEN remove it's position and this is the only way I could find, any other attempts didn't wait for the animation to be played and just updated itself instantly.
This is the thread code I used to remove the style.
new Thread(() -> {
try {
Thread.sleep(500);
} catch (InterruptedException e) {
e.printStackTrace();
}
this.getUI().get().access(() -> {
getContent().getStyle().remove("position");
});
}).start();