-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Fix size of header menus #16057
Fix size of header menus #16057
Conversation
core/css/header.scss
Outdated
@@ -114,6 +114,9 @@ | |||
/* Use by the apps menu and the settings right menu */ | |||
#apps > ul, | |||
&.settings-menu > ul { | |||
max-height: calc(100vh - #{$header-height}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is an issue on Apple devices as the nav bar is counted in the 100vh. That's why we stopped using it :/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So this needs to be fixed? What’s the proper way to do it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use percent. so it depends on the size of the window height. but it's not going to work here as the % would be relative to the header 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
max-height: calc(100vh - #{$header-height}); | |
max-height: calc(100% - #{$header-height}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does it works Jan?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No as the 100% are calculated from the parent element (which is the popover trigger button at 50px height)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You won't see the issue with vh on emulator or android devices.
iOS devices does not take the bottom navigation bar of the browser out of the 100vh. Meaning 100vh always include the navigation bar and therefor always scrolls because it's bigger.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This still needs more changes, the right header menu (with the link to settings and the user list) is still having the problem.
And the normal app menu has 2 scroll bars now...
@juliushaertl What is the status here? We are close to the beta 1. Should this go into 17 or 18? |
Btw this is still a problem with the external sites app: nextcloud/external#140 Would be nice if we can fix this (maybe for 17.0.1) and backport it to 17 and 16? |
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
cea93eb
to
bef426e
Compare
I fixed the duplicate scroll bar by using the existing scroll container. Ready to review from my side. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixes the issue with the external sites app now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🐘
Header menus that are bigger than the screen height will now be scrollable:
Fixes nextcloud/external#140
The height is limited here
server/core/css/header.scss
Line 91 in da7bed1