Question

我想在模态p:dataTable中显示p:dialog（需要删除的条目）。当我像附加示例那样执行类似操作时，对话框显示为100％宽度。我怎么能避免这个？如果没有p:datatable，则会根据其内容呈现对话框。

最小例子：

<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>

我在Primefaces 5.1快照上，但5.0版本它是相同的。我尝试了afterdark，bootstrap和默认主题，但总是遇到同样的问题。

Answer 1

您可能使用可扩展/百分比宽度（例如width: 100%;）设置了该数据表样式，因此对话框占用了所有空间，以便相应地表示数据表的宽度。所以你有两种方法可以解决它：

给对话框一个宽度：

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

也

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

或者给数据表一个固定的宽度：

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

Answer 2

解决问题的一种优雅方式（如果不是最好的方法）是使用CSS Media Queries。你可以适应＆＃34;你的数据表只是使用类。

例如，

.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;
    }
}

这里我们假设在320到360px之间，我们的对话框总是有318px。

Dialog中的DataTable导致错误的宽度

2 个答案: