All-day bar and weekdays headings misalignment when scrollbar is fixed (E.g. Windows)

[Csandori]

Hello @antoniandre!

I have an issue with the columns when all-day is on. Even in the docs at # All day events it is visible that the all-day cell is not aligned with the column.

Is there any solution for that?

Thanks!

[Twoody]

@Csandori apply some good CSS :)

[Csandori]

Right! Thanks, and sorry :)

[antoniandre]

Hi @Csandori,

Thanks for reporting, and thanks @Twoody. I did not know there was a misalignment as it works well on the browsers I have tried (see screenshot).

But if it's not properly aligned in your browser and you need some CSS tweaking I could probably add that in the default library CSS. For that, if you could please add a screenshot so I can see what it does and help me with those details:

• What is your browser?
• Do you have any custom rendering or custom styling or just normal?
• What was the CSS that you had to put please?

Thanks!

[Csandori]

Everything is because of the scrollbar. i didn't touch the css yet (just started using vue-cal). I use Google Chrome v79.0.3945.130 My temporary solution was removing the scrollbar, just to move along. Thanks! :)

[green-pigeon]

The fix that works for me is to subtract the scrollbar width from the All day line width. I'm using Chrome too. Here is my code:

`getScrollbarWidth() { // Creating invisible container var outer = document.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; // forcing scrollbar to appear outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps document.body.appendChild(outer);

        // Creating inner element and placing it in the container
        var inner = document.createElement('div');
        outer.appendChild(inner);

        // Calculating difference between container's full width and the child width
        var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

        // Removing temporary elements from the DOM
        outer.parentNode.removeChild(outer);
        this.$log.info(scrollbarWidth);
        return scrollbarWidth;
    },
    updateStyles() {
        var scrollbarWidth = this.getScrollbarWidth();
        var css = ".vuecal__all-day { width: calc(100% - " + scrollbarWidth + "px) !important;}";

        var style = document.createElement('style');
        style.type = 'text/css';
        style.styleSheet ? style.styleSheet.cssText = style : style.appendChild(document.createTextNode(css));

        document.getElementsByTagName("head")[0].appendChild(style);
    },` 

[antoniandre]

Thanks for the details @Csandori and for your solution @green-pigeon.

I did not see the problem of the scrollbar and all-day bar as it goes on top of the content and fades away when not scrolling on mac.

@green-pigeon's solution is perfect, the only thing that could probably be improved is setting a padding-right instead of width and calc().

I will see if I can add this in the vue-cal codebase, if not I will add this in the documentation at least.

Meantime, if the issue is solved I let you close it!

Cheers.

[antoniandre]

Hi @Csandori, @green-pigeon,

I have added this style modification in Vue Cal's codebase, now released in version 2.21.0. The scrollbar check is triggered on mounted. Please remove your modifications outside of Vue Cal and have a go.

Let me know if that aligns correctly on your end and you should already see the bar correctly aligned in the documentation example now: https://antoniandre.github.io/vue-cal/#ex--all-day-events (I have also placed a comment about this in the example)

[Csandori]

Thank you @antoniandre!

You are the best :)

[herteleo]

Thanks for the fix @antoniandre!

The solution works if you start in the week view. But if the default view is month (with no scrollbar) and you switch to the week view (with scrollbar) this won't work.

My current workaround:

<vue-cal ref="calendar" @view-change="viewChange" />

methods: {
  viewChange() {
      setTimeout(() => {
        this.$refs.calendar.alignAllDayBar();
      }, 300);
  }
}

I think the timeout is necessary because of the view-change transition-duration.

[antoniandre]

Hi @herteleo,

Thanks for sharing your code, quite helpful. :) I updated the documentation for this particular case: https://antoniandre.github.io/vue-cal/#ex--all-day-events

Last thing, I recommend to set a flag to skip the function call once it's done.

[antoniandre]

Closing the issue now. Please reopen if you still see a problem.

[pzeinlinger]

Hi @antoniandre, I've come across a similar issue with split days and sticky headers. Calling alignAllDayBar() does not help though. I'm on v2.24.7.

[antoniandre]

Hi @pzeinlinger, Thanks for reporting. That makes sense and I did not think about that part. I made the change in the alpha version and released it in version v3.0.0-alpha.7

Please try it and let me know if that fixes the issue with the day splits.

npm i --S vue-cal@alpha

To everybody on this thread: for information, in the V3 it should be no longer needed to call the alignAllDayBar() method as it will now always trigger in mounted, regardless of the current view and wether you have an all-day bar. Please refer to the release notes: https://antoniandre.github.io/vue-cal/#release-notes

The V3 will probably be released as stable at the end of the week.

[pzeinlinger]

Seems to be working now. Thanks :-)

[antoniandre]

V3 is released, closing issue now.