Overlap & Collapsible Panel


I am wondering how to get a Overlap & Collapsible component in vaadin app as shown in the snapshot & in the URL https://vaadin.com/forum

Many Thanks in advnce.
Girish Jamba.

That’s just done with HTML, very simple JavaScript, and some CSS to style and position it. You should be able to inspect the element with Firebug or similar inspector. It’s a floating div element identified by it’s id. The CSS defines the position for it with “top: 40%; position: fixed;”. The JavaScript essentially has onClick and mouseOut event handlers, which modify the style attribute of the element to make it wider or collapse it, respectively.

The JavaScript is not even needed if you use :hover pseudoselector in the CSS.