How to add resizing to a vaadin component

Hi,

I want to have a vaadin component which can be resizable like the vaadin Window. Can someone guide me how I can go about creating such a component?
I am trying to develop a web application where user can place their components however they want and also resize as per their need.

Reagrds,
Sangeeta

You could use the CSS3 resize property (isn’t available in all brothers though).
Here is a jsfiddle example on how to use the property:
http://jsfiddle.net/56brtcoh/1/

Hi Marius,
I actually tried that on a panel. The problem with this css property is that it applies to all the components inside the panel as well. That looks wierd and confusing.
public CustomPanel(){
Panel panel = new Panel();
VerticalLayout l = new VerticalLayout();
Label fl = new Label(“Label1”);
Label f2 = new Label(“Label2”);

    l.addComponent(f2);
    l.addComponent(fl);
    l.setWidth("100%");
    panel.setContent(l);
    panel.setWidth("50%");
    setStyleName("resizing");
    setCompositionRoot(panel);
    
}

in css
.resizing{
resize: both;
}

17533.docx (83.7 KB)

Then you should define your css selector more specific. So that it looks like this for example:

.v-panel-content-resizable{
    resize: both;
    overflow: auto;
}