Resizing of Panel using Javascript in Vaadin

I searched for resizing of Vaadin Panel but couldn’t get much help on that. So I want to try resizing using Javascript/Jquery (See http://api.jqueryui.com/resizable/ ). But I am not getting any help on using Javascript with Vaadin 7.

Panels can be sized in the same way Layouts can be resized using setWidth, setHeight, setSizeFull, setSizeUndefined, …
To use JS in Vaadin you can
A use JavaScript.execute() to execute small JS snippets.
B implement a JS component in Vaadin
C use Javascript from GWT client side in an expansion or custom widget

I wanted to create a panel which the user is able to resize dynamically in the browser and it’s child component also resizes dynamically based on the dimensions of the panel and so forth. Currenty I’m able to provide dynamic resizing to the user by adding CSS rules to the panel, but the child component does not resize based on the size of the parent component.

Did you declare the child components with relative sizes.
For example: If you have a panel with some height (panel layout should be 100% if you don’t need scrolling) and a child component inside the panel’s layout which also has 100% height it should resize dynamically when the panels size changes.
What do you mean by resizing using css? Do you mean defining height and width using css attributes or using the resizable attribute to let the user resize a component by dragging it with the mouse?

You could create a Javascript extension with a code like:

http://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript