DataTable inside Dialog results in wrong width

Question

I want to show a p:dataTable inside a modal p:dialog (entries which need to be deleted). When I do something similar like the attached example, the dialog is shown with 100% width. How can I avoid this? Without p:datatable, the dialog is rendered according to its content.

Minimal example:

<p:dialog header="Example" widgetVar="exampleDlg" closable="true" 
          resizable="false" appendTo="@(body)" modal="true">
    <h:form id="exampleForm">
        <p:dataTable emptyMessage="Even an empty DataTale">
        </p:dataTable>
    </h:form>
</p:dialog>

I'm on Primefaces 5.1 Snapshot, but with 5.0 it's the same. I tried afterdark, bootstrap and default theme and always the same problem.

Answer 1

You probably have that datatable styled with some scalable/percentage width like width: 100%; so the dialog is taking all the space in order to represent the width of the datatable accordingly. So you have two options to fix it:

Give the dialog a width:

<p:dialog header="Example" widgetVar="exampleDlg" closable="true" 
                      resizable="false" appendTo="@(body)" modal="true" width="50%">

also

<p:dialog header="Example" widgetVar="exampleDlg" closable="true" 
                      resizable="false" appendTo="@(body)" modal="true" width="400">

Or give the datatable a fixed width:

<p:dataTable emptyMessage="Even an empty DataTale" style="width: 300px;">