How to modify shortcuts modal on desktop to allow for low-resolution window sizes
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Summary
Problem
The shortcut dialog doesn't allow the close button to be clicked for resolutions smaller than height of 768. It looks to be calculated height, and there is no scrollbar for the dialog.
Diagnosis
Environment
This impacts any users operating in Desktop view with a window resolution 1024x768 (pixel width/height).
This is reproducible in any desktop browser by resizing a window to be smaller than the above dimensions.
Cause
Per CONFSERVER-53525, we do not support resolutions going lower than 1024x768 for Confluence. In desktop mode, the modal is fixed in terms of height and width, so no scrollbars will be available to allow for navigation around it.
Solution
Workaround
You can always get out of the Keyboard Shortcuts pane by putting in the ESC keystroke from your keyboard.
If this is for some reason not available, you can resize the window to dimensions greater than what it might be at the moment you're experiencing this issue. Or, you can switch from Desktop view to Mobile view, which will also resize the display for responsive/adaptive displays.
As this is unsupported for lower resolutions, there's really no true resolution other than going to a higher resolution standard. That said, there is an (also unsupported) CSS hack you can do to change the look and feel for this specific element:
1
2
3
4
5
6
7
8
9
10
11
12
@media only screen and (max-height: 760px) {
.aui-popup.aui-dialog {
height: 560px !important;
margin-top: -285px !important;
}
.dialog-page-menu {
height: 450px !important;
}
.dialog-panel-body {
height: 450px !important;
}
}Was this helpful?