PrimeFaces 4.0 对话框标题非常适合 IE 和 Firefox 中的对话框窗口，但不适用于 Chrome，除非我将鼠标光标移到对话框标题上。当我将光标移动到对话框标题时，它会自行缩放并适合对话框窗口。我使用的所有对话框都会遇到此问题，而不仅仅是我在下面发布的对话框。我只在 Chrome 中遇到这个问题。您知道 Chrome 中为什么会出现这种情况以及如何解决此问题吗？
对话框代码和屏幕截图如下:
这是对话框标题首次打开时的状态
这是当我将鼠标光标移到对话框标题上时的状态。 您会看到它具有正常大小。
对话框代码:
<p:dialog header="#{graphAnalysis.charts.chartTitle} Distribution"
closeOnEscape="true" width="800" dynamic="true"
height="550" widgetVar="lineChartDialog" closable="true"
onShow="loadLineChart()" minimizable="true" position="center"
id="distChartDialogId" >
<h:form style="margin-top: 20px;" id="chartForm">
<p:lineChart id="lineChartId" value="#{graphAnalysis.charts.currentChart}"
style="height: 450px;width: 750px" animate="true" legendPosition="e"
widgetVar="lineChartWg" yaxisLabel="Fraction of Proteins"
xaxisLabel="#{graphAnalysis.charts.chartTitle}"
title="#{graphAnalysis.charts.chartTitle} Distribution" zoom="true" />
<p:remoteCommand name="loadLineChart" update="lineChartId" async="true" process="@this" />
<p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportLineChart()"/>
</h:form>
</p:dialog>
另一个对话框代码:
<p:dialog width="800" height="500" widgetVar="graphVis" dynamic="true"
closable="true" draggable="true" minimizable="true" position="center"
closeOnEscape="true" header="Graph Visualization" onShow="updateGraph()">
<h:form>
<p:panel style="border: none;height:450px" id="graphPanel">
<p:mindmap value="#{browse.graph.root}" style="width: 800px;height: 600px">
<p:ajax event="select" listener="#{browse.graph.onNodeSelect}" />
<p:ajax event="dblselect" listener="#{browse.graph.onNodeDblselect}"
oncomplete="details.show()"/>
</p:mindmap>
</p:panel>
<p:remoteCommand name="updateGraph" update="graphPanel" async="true" process="@this" />
</h:form>
</p:dialog>
我的页面结构是这样的:
<html>
<f:view>
<h:head>
...
</h:head>
<h:body>
<p:layout>
<p:layoutUnit>
HEAD
</p:layoutUnit>
<p:layoutUnit>
BODY
</p:layoutUnit>
<p:layoutUnit>
FOOTER
</p:layoutUnit>
</p:layout>
DIALOG CODES HERE
</h:body>
</f:view>
</html>
最佳答案
我的解决方案非常糟糕，在某些情况下它不起作用，但在大多数情况下，标题现在可以正确显示。
将代码添加到您的 JavaScript 文件:
function waitForDialogToLoad(dialog, initialWidth, counter){
//if there was less then 50 tries, try again
if(counter<50){
//if dialog hasn't changed its width, it means it hasn't appeared
if(dialog.width()==initialWidth){
//increase counter
counter ++;
//and try again
setTimeout(waitForDialogToLoad,10,dialog,initialWidth, counter);
}
else{
//set final width of header
var header = dialog.find(".ui-dialog-titlebar");
header.width(dialog.width());
}
}
}
function showDlg(dialog) {
$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
//if the browser is chrome
if($.browser.chrome){
//find dialog object
var dialogDOM = $("#"+dialog.id.replace(/\:/g,"\\:"));
//set initial width of header
var header = dialogDOM.find(".ui-dialog-titlebar");
header.width(dialogDOM.width());
//remember width of header
var currentWidth = dialogDOM.width();
//show dialog
dialog.show();
//set entry counter
var counter = 0;
//after 10 miliseconds check if dialog has appeared
setTimeout(waitForDialogToLoad,10,dialogDOM,currentWidth, counter);
}
else{
dialog.show();
}
}
然后在 View 中，而不是
dialog.show();
通话
showDlg(dialog);
关于css - PrimeFaces 对话框标题大小不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20459481/