controlling Dialog size

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
nbs
Posts: 9
Joined: 19 Feb 2018, 14:44

18 Mar 2018, 12:32

Placing a datatable inside a dialog makes the dialog fullwidth even if the table has one column.

Code: Select all

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100" responsive="true">
         <p:dataTable scrollWidth="50%">
            <p:column id="Col1" headerText="Doc No" width="30" style="text-align: left">
                 12345
            </p:column>
         </p:dataTable>
   <h:outputText value="This is a Modal Dialog." />
</p:dialog>
Image

How do I make the dialog to be center of page just like it is before I add the datatable, when I try to set size the table the dialog floats to the left.

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

19 Mar 2018, 07:22

Hi,
We'll check and get back to you.

Regards

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

27 Mar 2018, 09:27

Hi,

You can use codes that I wrote below. I think it will fix your problem.

- xhtml code;

Code: Select all

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100" left="auto" responsive="true">
                                <p:dataTable scrollWidth="50%">
                                        <p:column id="Col1" headerText="Doc No" width="30" style="text-align: left">
                                             12345
                                        </p:column>
                                </p:dataTable>
              <h:outputText value="This is a Modal Dialog." />
</p:dialog>

- css code;

Code: Select all

body .ui-dialog .ui-dialog-content .ui-datatable table {
    width: auto;
}
Best Regards

Post Reply

Return to “California - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests