How to modify shortcuts modal on desktop to allow for low-resolution window sizes

Still need help?

The Atlassian Community is here for you.

Ask the community

 

Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.

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

 

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.

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:
    @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;
        }
    }
Last modified on Oct 17, 2017

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.