アナリティクスの埋め込みによるVisualforce navbarオーバーフローの問題の修正方法：reportCharts

Question

長いタイトルは残念です。私はこの質問を1週間前に公式Salesforceデベロッパーフォーラムに掲載しましたが、それでもまだ回答が得られていないので、私はもっと良い運があるかどうかここで質問したいと思っていました。

私はvisualforceページを持っています。右上隅に埋め込まれたpiechartを追加するまでうまくいきました。

：私はこれらを追加した後、私は、ナビゲーションバーが外にこぼれ始めた、それはここでは、コンテナ（通常、追加のメニュー項目のドロップダウンに自分自身を変換することになっている）

だ私のVFコードであることに気づきました私は基本的にすべてのディスプレイにpiechartsの一つを除いて設定のjavascript機能を持っている

ul.tabs { 
    overflow: hidden; 
    border-top: none; 
    border-left: none; 
    border-right: none; 
    border-bottom: 3px solid; 
    border-color: #1797C0; 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 10px; 
} 

li.tab { 
    list-style-type: none; 
    float: left; 
    display; inline; 
    background-color: inherit; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 0px; 
    margin: 0px; 
    transition: 0.3s; 
} 

.tabs a { 
    padding: 5px 10px; 
    font-weight: bold; 
    display: inline-block; 
    background: #fff; 
    color: #000; 
    text-decoration: none; 
} 

.tabs a:hover { 
    text-decoration: none; 
    color: #1797C0; 
} 

.tabs a.active { 
    background: #1797C0; 
    color: #fff; 
    text-decoration: none; 
} 

.topleft { 
    float: left; 
    position: relative; 
    width: 100%; 
    margin-bottom: 10px; 
} 

.topright { 
    float: right; 
    position:absolute; 
    right:10px; 
    z-index: 11; 
} 

.piechart { 
    display: none; 
} 

.pagelabel { 
    position: relative; 
    font-size: 1.5em; 
    color: #222; 
    margin: 10px; 
} 

.saleschart { 
    width: 90vw; 
    height: 90vh; 
    padding-top: 15px; 
} 

.logo { 
    display: inline; 
    float: left; 
} 

.chartheader { 
    color: #0000ff; 
    font-size: 1.3em; 
} 

.maptotal { 
    font-size: 1.5em; 
    color: #222; 
    display: inline; 
    float: right; 
    width: 60%; 
} 

：ここ

<apex:page controller="SalesGoalsController" sidebar="false"> 
    <apex:stylesheet value="{!$Resource.MapStyles}" /> 
    <apex:includeScript value="{!$Resource.MapSettings}"/> 
    <apex:includeScript value="{!$Resource.MapTabs}" loadonReady="true"/> 

    <script type="text/javascript"> 
      // some javascript stuff that initializes some things here 
      window.onload = function() { 
       // a bunch of Visualforce.remoting.Manager.invokeAction() 
       // calls that do not manipulate any elements on the page 
       // whatsoever and i would never have any reason to suspect 
       // that this would be what is causing this issue because 
       // literally all these calls do is populate some arrays 
      }; 
    </script> 

    <div class="pagelabel">Maps</div> 

    <div id="tabsContainer"> 
     <ul class="tabs"> 
      <li class="tab"><a href="#tab1">tab1</a></li> 
      <li class="tab"><a href="#tab2">tab2</a></li> 
     </ul>   
    </div> 

    <div id="tab1" class="tabcontent"> 
     <div class="topleft"> 
      <div id="tab1Logo"> 
       <apex:image url="{!$Resource.tab1LogoSmall}"/> 
      </div> 
     </div> 

     <div class="topright"> 
      <div id="piechart-world" class="piechart"> 
       <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-us" class="piechart"> 
       <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-ca" class="piechart"> 
       <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
     </div> 

     <div class="ChartsContainer" > 
      <font size="3" color="blue"> 
       <p>Opportunities sold this year</p> 
       <select id="tab1ChartView" onchange="setView(this)"> 
        <option value="world">World</option> 
        <option value="usa">USA</option> 
        <option value="canada">Canada</option> 
       </select> 
      </font> 
      <div id="tab1SalesChart" class="saleschart"> 
      </div> 
      <font size="3" color="blue"> 
       <p>RFQ received this year</p> 
      </font> 
      <div id="RFQChart" class="saleschart"></div> 
     </div> 
    </div> 

    <div id="tab2" class="tabcontent"> 
     <div class="topleft"> 
      <div id="tab2Logo"> 
       <apex:image url="{!$Resource.tab2LogoSmall}"/> 
      </div> 
     </div> 

     <div class="topright"> 
      <div id="piechart-world" class="piechart"> 
       <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-us" class="piechart"> 
       <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
      <div id="piechart-ca" class="piechart"> 
       <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false"> 
       </analytics:reportChart> 
      </div> 
     </div> 

     <div class="ChartsContainer" > 
      <font size="3" color="blue"> 
       <p>Opportunities sold this year</p> 
       <select id="tab2ChartView" onchange="setView(this)"> 
        <option value="world">World</option> 
        <option value="usa">USA</option> 
        <option value="canada">Canada</option> 
       </select> 
      </font> 
      <div id="tab2SalesChart" class="saleschart"> 
      </div> 
     </div> 
    </div> 
</apex:page> 

は私のCSSあるなし（表示されているものはdisplay：ブロックです）、ユーザーがどのタブにいるかによって異なります。私はこれがかなりハッキーであることを知っていますが、私は本当にそれを行うためのより良い方法を理解することができませんでした。あなたには、いくつかのVisualforce.remoting.manager.invokeAction();電話を持っている場合

function showPiechart(piechart_name) { 
    var elem_id = "piechart-" + piechart_name; 
    for (var i=0, elem; elem = piechart_divs[i]; i++) { 
     if (elem.id == elem_id) { 
      elem.style.display = "block"; 
     } else { 
      elem.style.display = "none"; 
     }; 
    }; 
}; 

Answer 1

だから、どんなダム理由で、window.onload = function() { ... }ブロックの内部で行われ、あなたのナビゲーションバーを破るために起こっています。実際、あなたがVisualforce.remoting.manager.invokeAction();コールをしていなくても、私が知る限り、これは起こりうるかもしれません。ブロックがすべて実行している場合は、console.log("hello world");ステートメントを呼び出すこともあります。ですから、この馬鹿げた愚かなバグを回避するには、代わりにwindow.onreadyのようなものを使用しなければなりません。これは、似たような問題に遭遇した誰かを助けて、彼らが私のようにそれを理解しようとしている間に、彼らの髪を引っ張って6日間過ごすことをやめさせてくれることを願っています！

更新：誰かが既にVisualforceページ内のwindow.onloadで何かを行うのがなぜブノーであるかを説明しているようです。 https://salesforce.stackexchange.com/questions/184589/window-onload-function-disables-inline-edit-capabilities-on-custom-vf-page

スキニーは、すでにSalesforceがwindow.onloadをnavbarを折り畳まなければならない機能を含む独自のクラップスにフックするということです。あなたがVFページにあなた自身をフックすると、それは彼らがしたことを上書きし、彼らの駄目は決して実行されません。あなたが知っている以上...