Absolute positioning

Hello,

I have an app which uses the router where each view has a mainlayout assigned.

Now I need to create an overlay area which stays fixed on the bottom right of the screen when scrolling. Normally I would have added the component to html body and set the position to absolute.

Within flow I can’t figure out how to add the component to the body. What’s the best solution to achieve the fixed position on the screen while scrolling?

Thx, Andreas

The parent of the MainView is body.

Thanks Tatu Lund,

When should I add the component then? Can you post an example please?

I can’t figure out how to add the component to the parent properly.

You need to do it onAttach(..) method of your MainLayout. Otherwise getParent().isPresent() or getUI().isPresent() is false since your layout is not yet attached to UI. Check the following code and see how child is added to body. You can use getParent() or getUI() here, the result is the same.

@Override
public void onAttach(AttachEvent attachEvent) {
	Html child = new Html("<B>Blaa blaa</B>");
	child.getElement().getStyle().set("position","absolute");
	child.getElement().getStyle().set("bottom",50+"px");
	child.getElement().getStyle().set("right",50+"px");
	this.getUI().get().getElement().appendChild(child.getElement());
	System.out.println(this.getUI().isPresent());
	System.out.println(this.getParent().isPresent());
	System.out.println(this.getElement().getParent());		

}

Is the above the only way to do absolute positioning in Vaadin 11+?
No more AbsoluteLayout?
R

It is rather easy to implement such custom layout in Vaadin 11+ which is like old absolute layout, you can find code example here

https://stackoverflow.com/questions/51216311/replacement-for-absolutelayout-from-vaadin-8-framework-in-vaadin-10-flow

I guess the design of Vaadin 11 is quite minimalist.
I moved to Vaadin in the past due to its ease of use.
I am very excited about Vaadin 11, but it seems the Vaadin developers expect us to be experts in lots of details, which takes away from the old ease of use…

Anyway thanks for the tip.

I guess the design of Vaadin 11 is quite minimalist.

This is somewhat true. Vaadin Platform client part has been implemented from the scratch, and the feature set is not yet grown as big as it is in Vaadin 8 for example. But there is lot of things ongoing that will bridge the gap, here are some:

We have page for example here about forthcoming things to 12, etc. https://vaadin.com/roadmap release 12 expected to be out early december. It will add couple of missing components. So release by release the platform will be less minimalistic.

Our target is not to implement Vaadin 8 components and features there one to one. In some cases it is so, when there is popular demand. But we would like to also add features that were missing Vaadin 8.

Also the number of Vaadin 8 add-ons is naturally much larger at the moment, but number of the Vaadin 10+ add-ons is steadily growing. We also introduced large number of Polymer component webjars in the directory, to make developing Vaadin Platform java add-ons easier for the community.