Question

PrimeFaces 4.0对话框标题非常适合IE和Firefox中的对话框窗口，但不适用于Chrome，除非我将鼠标光标移到对话框标题上。当我将光标移动到对话框标题时，它会自动缩放并适合对话框窗口。对于我使用的所有对话框，我都遇到了这个问题。我只在Chrome中遇到此问题。你知道为什么Chrome会发生这种情况吗？我该如何解决这个问题呢？

对话框代码和屏幕截图如下：

这是首次打开时对话框标题的状态

This is the status of dialog header when it's opened first

当我将鼠标光标移到它上面时，这是对话框标题的状态。你看它的大小正常。

This is the status of dialog header when I move mouse cursor over it

对话框代码：

        <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>

Answer 1

我的解决方案非常讨厌，并且在某些情况下，它不起作用，但在大多数情况下，标题现在正确显示。

将代码添加到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();
    }
}

然后在视图中，而不是

dialog.show();

呼叫

showDlg(dialog);

PrimeFaces对话框标题大小不正确

1 个答案: