Resizable adds resize handlers to the target component.
<div class="card">
<p:panel id="basic" header="Basic" styleClass="mb-2">
Resizable Panel
</p:panel>
<p:resizable for="basic"/>
<p:panel id="aspectRatio" header="Aspect Ratio" styleClass="mb-2">
Resize with aspect ratio
</p:panel>
<p:resizable for="aspectRatio" aspectRatio="true"/>
<p:panel id="ghost" header="Ghost" styleClass="mb-2">
A ghost is displayed during resize
</p:panel>
<p:resizable for="ghost" ghost="true"/>
<p:panel id="animation" header="Animated" styleClass="mb-2">
Animation enabled while resizing
</p:panel>
<p:resizable for="animation" animate="true" effect="swing" effectDuration="normal"/>
<p:panel id="boundaries" header="Boundaries" style="width:300px;height:150px;" styleClass="mb-2">
Min and Max boundaries
</p:panel>
<p:resizable for="boundaries" minWidth="200" maxWidth="400" minHeight="100" maxHeight="200"/>
<p:panel id="grid" header="Grid" styleClass="mb-2">
Resize offset set to 20 pixels.
</p:panel>
<p:resizable for="grid" grid="20"/>
<p:panel id="handles" header="Handles" styleClass="mb-2">
Can be resized to any direction.
</p:panel>
<p:resizable for="handles" handles="e,w,n,se,sw,ne,nw"/>
<p:outputPanel id="containmentPanel" layout="block"
style="width:400px;height:200px;border:2px solid var(--surface-d);">
<p:panel id="containment" header="Containment">
Restricted to parent element boundaries.
</p:panel>
<p:resizable for="containment" containment="true"/>
</p:outputPanel>
<h5>Ajax Callback</h5>
<h:form>
<p:growl id="growl" showDetail="true"/>
<p:graphicImage id="nature" name="demo/images/nature/nature5.jpg" styleClass="shadow-1" />
<p:resizable for="nature" animate="true" ghost="true">
<p:ajax listener="#{resizableView.onResize}" update="growl"/>
</p:resizable>
</h:form>
</div>
@Named
@RequestScoped
public class ResizableView {
public void onResize(ResizeEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Image resized", "Width:" + event.getWidth() + ",Height:" + event.getHeight());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}