Jsf 2 对话框内的DataTable导致宽度错误

我想在模式

p:dialog

中显示

p:dataTable

（需要删除的条目）。 当我做类似的事情时，如附件中的示例，对话框显示为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 Snapshot上，但在5.0上是一样的。我尝试了afterdark、bootstrap和default theme，但总是遇到同样的问题。

您可能已经用一些可伸缩/百分比宽度（如

width:100%）设计了数据表样式

因此对话框占用了所有空间，以便相应地表示数据表的宽度。因此，您有两个选项来修复它：

为对话框指定一个宽度：

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

也

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

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

解决问题的一种优雅方式（如果不是最好的话）是使用。您可以通过使用类来“适应”数据表

比如说,

.xhtml

<p:dialog header="My Dialog Name" styleClass="my-dialog-class">
    <h:form>
        <p:dataTable id="myTable">
            ....
        </p:dataTable>
    </form>
</p:dialog>

在这里，我们假设在320到360px之间，我们的对话框将始终具有318px。
您是对的，用于选择的列的宽度确实为16px，但所有其他元素都没有设置样式。最小示例的行为也是一样的。我用了你的第一个暗示，没关系。。。如果内容更大，我需要看看会发生什么。我认为不设置任何宽度并依赖默认行为（“宽度：自动”）就足够了：（Thx到目前为止：）
<p:dialog header="My Dialog Name" styleClass="my-dialog-class">
    <h:form>
        <p:dataTable id="myTable">
            ....
        </p:dataTable>
    </form>
</p:dialog>

@media(min-width: 320px) {
    .my-dialog-class {
        width: 318px !important;
    }   
}
@media(min-width: 360px) {
    .my-dialog-class {
        width: 358px !important;
    }
}