Horizontal and vertical scrolling rendering issue

[syl]

When I use horizontal scrolling to navigate to the extreme right of the schedule, the timeline axis and the schedule are not synchronized anymore. It seems that this is due to the vertibar scrollbar which takes some space in the schedule content container, but the same space is not reserved in the time axis for some reason I do not understand.
See enclosed.
What option or css item do I need to look at to fix this?

Additionally, I have another issue related to vertical scrolling because part of the vertical space is blank (no task or resource display). There again I don't understand where the issue comes from and I don't know what scheduler option or css item I should modify to fix this?

Can someone help me out with this issue?

Thanks

[mats]

How can we reproduce this? Can you reproduce this in our online default samples?

Additionally, I have another issue related to vertical scrolling because part of the vertical space is blank (no task or resource display). There again I don't understand where the issue comes from and I don't know what scheduler option or css item I should modify to fix this?

Please only post 1 question per topic, start a new one and we'll investigate.

[syl]

Hi mats,

I actually figured out the issue.

I am not sure how you could reproduce this because the scheduler object I am using is embedded in a framework that I cannot easily share with you and you might not want to bother using yourself.

If you look at the srollto example, you may see that at the extreme right of the time axis, there is some reserved space which width corresponds to the width of the vertical scrollbar.

When I inspect the DOM elements, I can see that the time axis <header> element has a custom style attribute that sets the "margin-right" to 16 pixels. See below.

<header class="b-grid-header-container b-grid-vertical-overflow" data-owner-cmp="container" data-max-depth="0" style="margin-right: 16px;">[...]</header>

The issue is that I had another CSS rule that was setting "width=100%" for the element, so the right margin was not aligned with the scollbar.

This can be fixed by adding other custom styles to the <header> element to prevent such "CSS conflicts", in particular by setting "width: auto; min-width: auto;", etc.
You might want to apply this sort of fix to the product itself, but at least I have my own workaround now.

[mats]

So it sounds like you had a CSS conflict with another frontend framework? We'll have a look to see what we can do to avoid this kind of clash.

[syl]

Yes that's exactly it and if there is anything you can manage to avoid such conflicts, that can always be helpful.
And just to be clear, if you take the example I mentioned about and update the <header> element I highlight by adding "width:100%" in the style, you will see the problem appear.

[mats]

Thanks for providing details to reproduce!