Change width of primefaces dialog

Question

I want to increase the width of a primefaces dialog which is already shown. The user clicks on a link/button, the dialog gets extended in the width and shows some more content. All approaches I tried were not successful:

1.: change with jquery:

$('theFormId\\:theDialogId').css('width', 1000);

2.: refer p:dialog width attribute to a backing bean value:

<p:dialog width="#{myBean.dialogWidth}"...

When the link/button is clicked, the backing bean dialogWidth member is changed and the dialog is updated. Unfortunately this closes the dialog.

Is there a possiblity to "live" resize an already displayed dialog?

I am using PF 5.1.16 and JSF 2.2.10

Regards Oliver

Answer 1

Set width's value from bean and button to set width

<h1>Dialog width</h1>

<h:form>
    <p:commandButton id="editBtnWF" icon="ui-icon-pencil"
                            title="WF-R" update="@form"
                            action="#{testBacking.setWidth}"
                            oncomplete="PF('dlg2').show();">
                        </p:commandButton>



    <p:dialog header="Modal Dialog" id="dlg" widgetVar="dlg2" modal="true"
         width="#{testBacking.dlgwidth}">

        <p:inputText value="#{testBacking.dlgwidth}"></p:inputText>
        <p:commandButton id="ee" icon="ui-icon-pencil"
                            title="WF-R" update="dlg"
                            action="#{testBacking.setWidth}"
                            oncomplete="PF('dlg2').show();">
                        </p:commandButton>
    </p:dialog>
</h:form>

Or try putting update="@form" , It works for me

Where in bean is like:

@ManagedBean
@RequestScoped
public class TestBacking implements Serializable {
    private static final long serialVersionUID = 1L;

    private Integer dlgwidth=500;

    public void setWidth(){
        System.out.println("TestBacking : dlgwidth = "+dlgwidth);
    }
    public Integer getDlgwidth() {
        return dlgwidth;
    }

    public void setDlgwidth(Integer dlgwidth) {
        this.dlgwidth = dlgwidth;
    }
}

Answer 2

actually you dont need to increase width of the dialog, if you update the content inside dialog it will automatically change width to fit its content

however you can change width

<p:dialog id="dlg" width="#{bean.widthValue}">
      ---contents-----
</p:dialog>

<p:commandButton  update="dlg" 
                  process="@this" 
                  actionListener="#{bean.changeWidth()}" />

in your bean

int widthValue;
public void changeWidth(){
   this.widthValue=500;
}

Answer 3

At the end I mapped the dialog width and height from the backing bean how described in the answers here. The update of the form/dialog closes the dialog. I used the omnifaces tag to keep the entered user data in the form during the dialog closing and opening.