Планировщик DayPilot - вертикальная полоса прокрутки никогда не появляется

Question

Этот вопрос для угловой реализации планировщика DayPilot.

Кажется, что независимо от того, что я делаю, я не могу заставить вертикальную полосу прокрутки появляться там, где отображаются события. Когда в планировщике больше строк, чем может поместиться, они просто обрезаются и скрываются от глаз.

Я прочитал документацию по настройке высоты здесь, здесь и здесь, а также эту тему справки. Я использовал разные комбинации настроек для 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;
}

Answer 1

overflow-y: hidden !important;

Судя по тому, что вы написали, похоже, что причиной является строка css. Я предполагаю, что это в родительском контейнере к разметке, которую вы предоставили. Это говорит о том, что, что бы вы ни делали, НИКОГДА НЕ ПОКАЗЫВАЙТЕ ВЕРТИКАЛЬНЫЙ СКРОЛ

Попробуйте удалить эту строку и посмотрите, что вам повезло.