如何修复由嵌入引起的 Visualforce 导航栏溢出问题 analytics:reportCharts

Question

抱歉，标题太长了。我大约一周前在官方 Salesforce 开发者论坛上发布了这个问题，但仍然没有得到任何回复，所以我想我会在这里问一下，看看我是否有更好的运气。

我有一个 visualforce 页面。它运行良好，直到我在右上角添加了一个嵌入式饼图。添加这些之后，我注意到导航栏开始从它的容器中溢出（它通常应该将自身转换为用于其他菜单项的下拉列表）

这是我的 VF 代码：

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

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%;
}

我有一个 javascript 函数，它基本上将除其中一个饼图之外的所有饼图设置为 display:none（显示的是 display:block），具体取决于用户所在的选项卡.我知道这很老套，但我真的想不出更好的方法。

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(); 调用，它会破坏您的导航栏。事实上，据我所知，即使您不进行 Visualforce.remoting.manager.invokeAction(); 调用，也可能会发生这种情况。如果该块所做的只是调用一些 console.log("hello world"); 语句，甚至可能会发生这种情况。因此，要解决这个令人发指的愚蠢错误，您必须改用 window.onready 之类的东西。希望这对遇到类似问题的其他人有所帮助，这样他们就不会像我一样花费 6 天的时间来解决问题！[=16=]

更新：看起来有人已经解释了为什么在 Visualforce 页面中使用 window.onload 做任何事情都是 no bueno。你可以在这里阅读：https://salesforce.stackexchange.com/questions/184589/window-onload-function-disables-inline-edit-capabilities-on-custom-vf-page

最重要的是 Salesforce 已经将 window.onload 挂钩到它自己的废话上，其中包括他们折叠导航栏所需的任何功能。如果你自己把它挂在你的 VF 页面上，那会覆盖他们所做的，所以他们的废话永远不会执行。你知道的越多...

如何修复由嵌入引起的 Visualforce 导航栏溢出问题 analytics:reportCharts

How to fix Visualforce navbar overflow issue caused by embedding analytics:reportCharts

salesforce

visualforce