[英]DayPilot Scheduler - Vertical Scrollbar never appears
这个问题是针对DayPilot Scheduler的Angular实现的。
看来,无论我做什么,都无法使垂直滚动条出现在渲染事件的位置。 当行中的行数超出了调度程序的容量时,它们就会被简单地切断并从视图中隐藏。
我已在此处 , 此处和此处阅读了有关设置高度的文档,以及此帮助主题 。 我对heightSpec
属性使用了不同的设置组合,结果如下:
Parent100Pct
按照文档建议进行操作并填充父元素。 当屏幕上的行数过多时,不会展开,不会显示任何滚动条。 Max
-会增长到我指定的固定大小,但是在屏幕上的行数超出屏幕容纳的行数时,同样不会显示任何滚动条。 Fixed
-精确渲染到我指定的高度,但再次没有垂直滚动条。 我基本上没有想法了。 我使用Bootstrap作为框架,我曾想过DayPilot可能无法很好地发挥作用,但是我找不到任何冲突。
看来我的代码应该可以工作,所以我将不胜感激任何建议。 这是我一直在使用的代码。 我敢肯定,这是一个很小的东西,它通常正盯着我。
标记:
<div id="page-container">
<div id="page-wrapper">
<div class="container-fluid controller ng-scope" ng-controller="HomeController as vm">
<div class="row" id="main-content">
<div class="col-md-12" id="am-main">
<daypilot-scheduler id="dp" config="vm.schedulerConfig" events="vm.events" publish-as="vm.scheduler"></daypilot-scheduler>
</div>
</div>
</div>
</div>
</div>
使用Javascript:
var minutesInDay = 60 * 24;
vm.schedulerConfig = {
startDate: '2017-01-01',
days: 90,
cellDuration: minutesInDay,
floatingEvents: false,
floatingTimeHeaders: false,
cellSweeping: false,
useEventBoxes: 'Never',
scrollDelayEvents: 0,
timeHeaders: [
{ groupBy: 'Month', format: 'MMMM yyyy' },
{ groupBy: 'Week'},
{ groupBy: 'Day', format: 'ddd dd' }
],
separators: [
{ color: 'Orange', location: new DayPilot.Date(), width: 5 }
],
treeEnabled: true,
cssClassPrefix: 'scheduler',
widthSpec: 'Parent100Pct',
heightSpec: 'Fixed',
height: 500,
durationBarVisible: false,
weekStarts: 1
}
CSS:
#page-container, #page-wrapper {
height: 100% !important;
}
#main-content {
height: 100%;
}
#am-main {
height: 89% !important;
}
.scheduler_cell {
background: transparent;
border: none;
margin: 5px 0;
padding: 5px;
min-width: 10px;
}
.scheduler_default_divider_horizontal {
background-color: white !important;
}
.scheduler_default_scrollable {
overflow-y: hidden !important;
font-family: 'Roboto', sans-serif !important;
}
.scheduler_default_rowheader_scroll, .scheduler_rowheader, .scheduler_corner {
width: 150px !important;
}
.scheduler_event_inner {
border-right: 0.5px solid black;
}
.scheduler_timeheadergroup, .scheduler_timeheadercol {
border: thin solid white;
}
.scheduler_timeheadergroup_inner, .scheduler_timeheadercol_inner, scheduler_timeheader_float_inner {
padding: 2px 0 0 4px;
}
overflow-y: hidden !important;
仅从您发布的内容来看,似乎css行很可能是原因。 我猜它在您提供的标记的父容器中。 也就是说, 无论您做什么,都不要显示垂直滚动条!
尝试删除该行,看看您有什么运气。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.