Datepicker in sidebar cut-off at certain zoom levels

[raimund-schluessler]

Since https://github.com/nextcloud/nextcloud-vue/issues/994#issuecomment-609953726 was closed, here now the stand-alone issue.

The datepicker is cut-off at certain zoom levels. This happens e.g. for latest master of Tasks and Calendar, which both use nextcloud/vue@1.4.1. It also still happens after #995 was merged.

Tasks@nextcloud/vue-1.4.1 with 110% zoom:

Tasks@nextcloud/vue-9f525decb32e9e89f0c4fdeefb266c356199c4d2 (after #995) with 110% zoom:

Calendar@nextcloud/vue-1.4.1 with 110% zoom:

The reason for the datepicker being cut-off is, that #app-sidebar has

#app-sidebar[data-v-120227ac] {
    ...
    overflow-y: auto;
    overflow-x: hidden;
}

and the datepicker is a child of the sidebar. Is there a reason why we don't append the datepicker to the body: https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/DatetimePicker/DatetimePicker.vue#L83 ?

cc @georgehrke @skjnldsv

[skjnldsv]

Yes, we had the same issue with navigation in #989. We ended up removing the id app-navigation and move to standalone classes so we're independent from the server. And now that the content is properly designed, we don't need the overflow anymore I guess :)

[raimund-schluessler]

This is still an issue in the latest version. The lines https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/AppSidebar/AppSidebar.vue#L522-L523 cut off everything overflowing the sidebar including the datepicker.

Can we remove the overflow, or should we adjust the datepicker to not be a descendent of the sidebar but e.g. body instead?

[skjnldsv]

Can we remove the overflow, or should we adjust the datepicker to not be a descendent of the sidebar but e.g. body instead?

Doing this usually create weird issues/ui glitches when you scroll. I'm ok removing the overflow :thinking:

[fnetX]

I don't like bumping issues, but this is really a killer for the nextcloud users on my instance, many are affected, and it doesn't seem as if there was much activity on this recently. What about the proposed removal, are there side-effects? Would it be possible to make sure the date picker pop-ups over all other elements? @skjnldsv @raimund-schluessler

[FabianUntermoser]

@fnetX As a workaround, I use the Custom CSS Plugin along with these CSS Styles in Settings -> Administration -> Theming:

# enlarge date picker in tasks
.mx-datepicker-main, .mx-datepicker-popup { left: auto !important; }

[fnetX]

Yes, read this in the downstream issue. I'd prefer if such a fix was deployed with the app itself temporarily if this upstream bug is a difficult one, especially because it probably affects much more users than those who track GitHub issues. I'm not exactly fond of installing extra apps for workarounds, but it will probably do ...

[raimund-schluessler]

Now that the AppSidebar has Tabs, this seems to get even trickier. Removing all overflow: hidden breaks the ability of scrolling the AppSidebarTabs content (or at least, I couldn't find a way to do it). I would be in favor of moving the datepicker to a different parent container, just as all the popovers are now a child of body by default. @skjnldsv Do you know if it would be possible to just use the Popover component for the datepicker as well?

Edit: I just saw there is actually the option to append it to body and we set it to false: https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/DatetimePicker/DatetimePicker.vue#L84 I will check what happens if we make it a prop and allow to append to body on demand.

[raimund-schluessler]

It really doesn't seem to be possible to have scroll and overflow at the same time: https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue

So the only solution is to attach to body. I will create a PR.

[susnux]

Fixed with https://github.com/nextcloud/nextcloud-vue/pull/1880