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

내 쉽고 신속 on은 매우 심해서 작동하지 않는 몇 가지 시나리오가 있지만 대부분의 경우 헤더가 올바르게 표시됩니다. 자바 스크립트 파일에

추가 코드 :

보기에서 다음

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 대화 상자 잘못된 머리글 크기

답변

관련 문제