Floating components


Dealing with rather large input forms, I am contemplating adding a floating ‘Save’ button that always stays visible at the bottom of the screen during scrolling.

Looking around in Vaadin or the add-ons, there does not seem to be anything directly supporting that. This either means it’s really trivial to do (position: fixed perhaps?), or it’s considered a bad idea UX-wise. I just wanted to check with people here before i delve into css attributes to accomplish this. Has anyone done this?

CSS is the easiest way to go forward

Ok, thanks for confirming. I was hoping to avoid digging too deep into browser land but i guess i have no option :wink:

If you don’t want to go into the css of it one way could be to put the form in a scroller with the save button below the scroller and give it a flex grow attribute

I had not even seen that component, this looks exactly what i need thanks !