primefaces仪表板小部件内置浏览器和firefox之间的差异答案

【问题标题】：primefaces dashboard widget differences between eclipse built in browser and firefoxprimefaces仪表板小部件内置浏览器和firefox之间的差异
【发布时间】：2017-10-19 08:39:46
【问题描述】：

我正在运行此处找到的仪表板示例： https://www.primefaces.org/showcase/ui/panel/dashboard.xhtml

我已将第一个面板“体育”替换为：

<p:panel id="cal" header="Calendar">  
    <h:form>
    <p:calendar id="calendar" value="#{calendar.date}"    mode="inline"></p:calendar>
    </h:form>
</p:panel>

还有在这里找到的 bean：

https://www.primefaces.org/showcase/ui/input/calendar.xhtml

然后我在第二个 p:panel 中添加了一个带有一列的 p:datatable

<p:panel id="simpleData" header="Simple Datatable">  
   <p:dataTable id="simpledata_tab" value="#{simpleMB.availableData()}" var="temp" 
   scrollable="true" scrollHeight="150" styleClass="simpledata_tab" >
        <p:column>
                <h:outputText value="#{temp.toString()}" />
        </p:column>
    </p:dataTable>
</p:panel>

这是我在浏览器内置的eclipse中得到的：

这就是我在 Firefox 上运行它时得到的结果：

当我从 xhtml 代码中删除数据表时，两个浏览器都返回相同的页面布局。 Firefox 版本是 52.1.0。我正在使用 Eclipse Neon。我在数据表中使用了一个 styleClass 来设置数据表的宽度，以防出现问题但问题仍然存在。

.ui-datatable.simpledata_tab
{  
    width:40%;
}

编辑 - eclipse 浏览器详细信息：

Browser name = Safari
Full version = 5.0
Major version = 5
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+

【问题讨论】：

在不同的操作系统上，Eclipse 将不同的浏览器封装为内置浏览器（例如 Windows 上的 IE，Linux 上的 FF）。您可以使用JavaScript code to display detailed information of your Eclipse built-in browser。

标签： css eclipse jsf primefaces

【解决方案1】：

由于某种原因，当包含数据表时，firefox 以不同于其他浏览器的方式呈现小部件。对我有用的唯一解决方案是将仪表板列宽设置为固定值。

.ui-dashboard-column {
    width: 300px;
}

但是，这会弄乱模型中创建的每一列，因此更好的方法是在面板内创建一个 div 并设置 div 的宽度。

【讨论】：