DataTable inside dialog results in wrong width
I want to show p:dataTable
inside the modal p:dialog
(entries to be deleted). When I do something similar to the above example, the dialog is displayed at 100% width. How can I avoid this? Without the p:dataTable
dialog box is displayed according to its contents.
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 pictured with Primefaces 5.1, but with 5.0 it's the same. I tried afterdark, bootstrap and default theme and always the same problem.
source to share
You probably have a datatype like this with some scalable / percentage width like width: 100%;
, so the dialog takes up all the space to represent the width of the corresponding datatable accordingly. Thus, you have two options:
Give the dialog a width:
<p:dialog header="Example" widgetVar="exampleDlg" closable="true"
resizable="false" appendTo="@(body)" modal="true" width="50%">
and
<p:dialog header="Example" widgetVar="exampleDlg" closable="true"
resizable="false" appendTo="@(body)" modal="true" width="400">
Or specify a fixed data width:
<p:dataTable emptyMessage="Even an empty DataTale" style="width: 300px;">
source to share
An elegant (if not the best) way to solve your problem is to use CSS Media Queries . You can only "fit" your data with classes.
For example,
.xhtml
<p:dialog header="My Dialog Name" styleClass="my-dialog-class">
<h:form>
<p:dataTable id="myTable">
....
</p:dataTable>
</form>
</p:dialog>
.css
@media(min-width: 320px) {
.my-dialog-class {
width: 318px !important;
}
}
@media(min-width: 360px) {
.my-dialog-class {
width: 358px !important;
}
}
Here we assume that between 320 and 360px our dialog will always be 318px.
source to share