[INFO REQ] Always visible horizontal scroll bar at the top

[dennisli]

Hi,

As the title states, how do I go about adding an always visible horizontal scrollbar at the top of the schedule? I have a schedule with 100s of resources and a very wide timespan, so scrolling to the bottom of the page is causing UX issues.

Thanks!

[Maxim Gorkovsky]

Hello.
You need to constrain height of the scheduler, that will bring horizontal scrollbar to the visible area.

[dennisli]

Hello.
You need to constrain height of the scheduler, that will bring horizontal scrollbar to the visible area.

Sorry, do you have more information on that? Do you mean using custom styles to set the viewport of the schedule itself so that there's a maxHeight on the viewport? Is there a particular property I should be setting?

[Maxim Gorkovsky]

You can set height on the container element or provide it in config:

new Scheduler({ height: 100 })

[dennisli]

I see. I just gave it a should, but now I'm getting quite a lot of empty space where there should be events.

  height: 'calc(100vh - 400px)'

Instead, I'm just getting blank space

[Maxim Gorkovsky]

Scheduler should've set this height to a container element. So you need to investigate CSS on your page and fix it.

[dennisli]

Looking at the DOM, it seems like only 9 events are rendering. This is from setting height in the schedule config to calc(100vh - 400px)

Screen Shot 2020-08-14 at 9.23.29 AM.png (57.25 KiB) Viewed 1514 times

[dennisli]

Perhaps I should be listening in on the Scheduler resize event to recalculate the height-span? I'm using it with react. Here is the styles I'm using where BryntumContainer is the parent, and bryntumScheduler is the class i've attached to the scheduler object.

  .BryntumContainer
    flex-grow: 1
    margin: 0
    display: flex
    flex-direction: column
    height: calc(100vh - 350px)

  .bryntumScheduler
    flex: 1 1 auto

[fabio.mazza]

Hi dennisli,

Could you please provide a runnable test case? Because we cannot to reproduce your error, what is probably is related directly to your css/styles.

Thank you.

[dennisli]

Ah. I think the issue was autoHeight was set to true.