css - 浏览器内置的 eclipse 和 firefox 之间的 primefaces 仪表板小部件差异

Question

我正在运行此处找到的仪表板示例: 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+

Answer 1

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

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

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