Fixed height and vertical scroll bar

[abdielcs]

It's more a question than a bug, I want to know if there are some configurations to manage a fixed height, showing a blank space if there are only a few elements in the side bar, and showing a vertical scroll bar from there if there are to many. In my test the timeline height grow to always show all the sidebar elements. Handling the scroll from outside don't like me since the horizontal scroll at the bottom them was hidden. I check the "rows" property from auto to an specific value. That slice the sidebar, but the rest was not printed at all, and the vertical scrollbar don't show up like I expected.

If there are a better way to just make questions like this one, please let me know.

Thanks

[ka215]

Hi, It would be difficult to meet your request as it would require significant changes to the DOM structure of the current timeline instance. As a hint for our approach, I would suggest that you do a DOM update like the code below.

$("#myTimeline").Timeline("initialized", function (self) {
    let $container   = $(self).find('.jqtl-container'),
        $sidebar     = $(self).find('.jqtl-side-index'),
        $rulerTop    = $(self).find('.jqtl-ruler-top'),
        $rulerBottom = $(self).find('.jqtl-ruler-bottom'),
        $eventContainer = $(self).find('.jqtl-event-container'),
        rowHeight    = $eventContainer[0].clientHeight / $sidebar.children('.jqtl-side-index-item').length,
        rowCounter   = 0
    $(self).parent().css({overflow: 'hidden'})
    $(self).css({overflow: 'hidden'})
    $container.css({overflowY: 'auto', overflowX: 'hidden'})
    $sidebar.children().each(function(){
        if ($(this).hasClass('jqtl-side-index-margin')) {
            $(this).css({ minHeight: (rowCounter == 0 ? $rulerTop.height() : $rulerBottom.height()) + 'px', boxSizing: 'border-box' })
        } else {
            let itemHeight = $(this).height()
            itemHeight = rowCounter % 2 == 0 ? itemHeight + 1 : itemHeight
            if (itemHeight > rowHeight) {
              itemHeight = Math.floor(rowHeight)
            }
            $(this).css({ height: itemHeight + 'px', lineHeight: itemHeight + 'px', boxSizing: 'border-box' })
        }
        rowCounter++
    })
})

This is a way to force overflowing container elements to be updated during instance initialization. However, it requires recalculating and setting the height of the elements in the object, and adjusting them would be very painstaking.

Thank you,