jsf - How to drag the p:dialog without use showHeader="true" in primefaces? -
i developing project using primefaces.
in that, used 1 p:panel
(in user.xhtml page) inside p:dialog
, set showheader="false"
p:dialog
.
for that, need drag p:dialog
when click , drag on p:panel
, included inside p:dialog
.
sample code:
<p:dialog showheader="false"> <ui:include src="${model.dynamicpage}"/> </p:dialog>
user.xhtml
<h:form id="userform"> <p:panel header="userpanel"> ....... </p:panel> </h:form>
any idea?
use draggable
component on panel instead of dialog
<p:panel id="pnl" header="userpanel"> <ui:include src="${model.dynamicpage}"/> </p:panel> <p:draggable for="pnl" />
and define panel dimensions css:
.ui-panel { margin: 15px; height: 200px; width: 300px; }
edit: if there several components in model.dynamicpage
facelet want panel allowed handle dragging of whole container, add css class , restrict draggable component handling class:
eg.
<p:panel id="pnl" showheader="false"> <ui:include src="${model.dynamicpage}"/> </p:panel> <p:draggable for="pnl" handle=".my-handle-classname" />
and
<h:form id="userform"> <p:panel header="userpanel" styleclass="my-handle-classname"> ....... </p:panel> </h:form>
Comments
Post a Comment