如何修复由嵌入引起的 Visualforce 导航栏溢出问题 analytics:reportCharts
How to fix Visualforce navbar overflow issue caused by embedding analytics:reportCharts
抱歉,标题太长了。我大约一周前在官方 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";
};
};
};
因此,无论出于何种愚蠢的原因,如果您在 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 页面上,那会覆盖他们所做的,所以他们的废话永远不会执行。你知道的越多...
抱歉,标题太长了。我大约一周前在官方 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";
};
};
};
因此,无论出于何种愚蠢的原因,如果您在 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 页面上,那会覆盖他们所做的,所以他们的废话永远不会执行。你知道的越多...