PrimeFaces對話框不正確的標題大小

PrimeFaces 4.0對話框標題非常適合IE和Firefox中的對話窗口，但不適用於Chrome，除非我將鼠標光標移動到對話框標題上。當我將光標移動到對話框標題時，它會自行縮放並適合對話窗口。我所使用的所有對話框都出現這個問題，而不僅僅是我在下面發佈的那個對話框。我只在Chrome中遇到這個問題。你知道爲什麼這在Chrome中發生，我該如何解決這個問題？PrimeFaces對話框不正確的標題大小

對話框代碼和屏幕截圖如下：

這是當它打開第一

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>

來源

2013-12-08 Viplime

我soluti on非常討厭，並且有些情況下，它不起作用，但是在大多數情況下，header現在可以正確顯示。

代碼添加到您的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);

來源

2014-02-11 10:55:29

PrimeFaces對話框不正確的標題大小

回答

相關問題