HTML5Viwer报告浏览界面没有上下和左右的滚动条
本帖最后由 Lenka.Guo 于 2017-2-9 10:13 编辑HTML5Viwer报告浏览界面没有上下和左右的滚动条，无法浏览整页报告，不知是什么原因造成的，请看看如何解决？
前端代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<style type="text/css">
body, html {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
.viewer {
height: 100%;
width: 100%;
/*display:inline-block;*/
}
</style>
<link href="../../Resource/plugins/ActiveReport/HTML5Viewer/css/theme-cosmo.css" rel="stylesheet" />
<link href="../../Resource/plugins/ActiveReport/HTML5Viewer/css/site.css" rel="stylesheet" />
<link href="../../Resource/plugins/ActiveReport/HTML5Viewer/css/GrapeCity.ActiveReports.Viewer.Html.css" rel="stylesheet" />
<script src="../../Resource/plugins/ActiveReport/HTML5Viewer/Scripts/jquery-1.10.2.js"></script>
<script src="../../Resource/plugins/ActiveReport/HTML5Viewer/Scripts/bootstrap-3.0.0.js"></script>
<script src="../../Resource/plugins/ActiveReport/HTML5Viewer/Scripts/knockout-2.3.0.js"></script>
<script src="../../Resource/plugins/ActiveReport/HTML5Viewer/Scripts/GrapeCity.ActiveReports.Viewer.Html.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var viewer =GrapeCity.ActiveReports.Viewer({
element: '#viewerContainer',
report: {
id: 'Modules/ActiveReports/StafflingHeadcountByFunctionAndDirectorAndFinanceCategory.rdlx',
},
reportService: {
url: '/ActiveReports.ReportService.asmx'
},
renderMode: 'Galley',
uiType: 'Desktop',
localeUri: '../../Resource/plugins/ActiveReport/HTML5Viewer/Scripts/i18n/Localeuri.txt',
});
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="viewerContainer" style="width: 100%; height:6500px; border: 1px solid gray;margin-top:2px;"> </div>
<asp:HiddenField ID="hf_RPBudgetName" runat="server" />
</form>
</body>
</html>
请先尝试将Body 样式的Overflow:hidden 删掉
body {
margin: 0px;
overflow: hidden;
}
把“overflow: hidden;”取消后上下的滚动条出现了，但是左右的滚动条还是没有
您好，
滚动条默认是当【报表纸张大小】大于【屏幕尺寸】时，会自动添加滚动条的，因为您添加了额外的CSS代码，影响了Viewer的宽度和高度，所以需要您检查CSS代码中具体是哪一块影响了滚动条的加载。
本帖最后由 bobby.wang 于 2017-2-9 14:46 编辑
测试 本帖最后由 Lenka.Guo 于 2017-2-9 16:09 编辑
这个竖向滚动条不出现，很有可能是因为height 设置的太大，当div的height始终大于纸张高度，就不会出现竖向滚动条，建议将height 值调小。
“<div id="viewerContainer" style="width: 100%; height:6500px; border: 1px solid gray;margin-top:2px;"> </div>”
请尝试设置viewerContainer的滚动条：
<div id="viewerContainer" style="width: 100%; height:6500px; border: 1px solid gray;margin-top:2px;">
修改为：
<div id="viewerContainer" style="width: 100%; height:6500px; border: 1px solid gray;margin-top:2px;overflow:scroll;">
您提到的工具栏打印按钮灰掉的问题，因为只有分页模式才允许打印，所以是正常现象。
此问题已解决，谢谢！ :loap1:
页:
[1]