Dialog内的DataTable导致宽度错误答案

【问题标题】：DataTable inside Dialog results in wrong widthDialog内的DataTable导致宽度错误
【发布时间】：2014-12-11 11:58:03
【问题描述】：

我想在模态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 和默认主题，但总是同样的问题。

【问题讨论】：

标签： jsf-2 primefaces datatable dialog modal-dialog

【解决方案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;">

【讨论】：

你是对的，选择列的宽度确实为 16px，但所有其他元素都没有样式。最小示例的行为相同。我用了你的第一个提示，没关系......我需要看看如果内容更大会发生什么。我认为不设置任何宽度并依赖默认行为（“宽度：自动”）就足够了 :( 到目前为止 :)

【解决方案2】：

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

例如，

.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 到 360 像素之间，我们的对话框总是有 318 像素。

【讨论】：