CODEWITHSUNDEEP
jsfprimefaces
user4907098
user4907098

Reputation:

How to drag the p:dialog without use showHeader="true" in primefaces?

I am developing a project using primefaces.

In that, I used one p:panel(in user.xhtml page) inside the p:dialog and I set showHeader="false" to the p:dialog.

For that, I need to drag the p:dialog when I click and drag on the p:panel, which is included inside the 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?

Upvotes: 0

Views: 2571

Answers (1)

Zim
Zim

Reputation: 1483

Use the draggable component on a panel instead of a dialog

<p:panel id="pnl" header="UserPanel">      
     <ui:include src="${model.dynamicPage}"/>     
</p:panel>
<p:draggable for="pnl" />

and define the panel dimensions with some css:

.ui-panel {
    margin: 15px;
    height: 200px;
    width: 300px;
}

Edit: if there are several components in your model.dynamicPage facelet but you want the panel to be the only allowed to handle the dragging of the whole container, add a css class to it and restrict the draggable component handling with this 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>

Upvotes: 1

Related Questions