-
Notifications
You must be signed in to change notification settings - Fork 83
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Datepicker in sidebar cut-off at certain zoom levels #998
Comments
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. |
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? |
Doing this usually create weird issues/ui glitches when you scroll. |
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. |
@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; } |
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 ... |
Now that the AppSidebar has Tabs, this seems to get even trickier. Removing all 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 |
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. |
Fixed with #1880 |
Since #994 (comment) 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](https://user-images.githubusercontent.com/2496460/78653976-2cdfa980-78c4-11ea-8118-0d142377bcae.png)
Tasks@nextcloud/vue-9f525decb32e9e89f0c4fdeefb266c356199c4d2 (after #995) with 110% zoom:
![Tasks_latest](https://user-images.githubusercontent.com/2496460/78657116-99f53e00-78c8-11ea-86c0-3b92c89bba50.png)
Calendar@nextcloud/vue-1.4.1 with 110% zoom:
![Calendar](https://user-images.githubusercontent.com/2496460/78656297-78478700-78c7-11ea-9a6b-0f2c4feaf96a.png)
The reason for the datepicker being cut-off is, that
#app-sidebar
hasand 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
The text was updated successfully, but these errors were encountered: