Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-30326

Issue Collector popup display broken on responsive mobile sites


      Problem statement

      On a responsive mobile site, where "pinch-to-zoom" is disabled, the Issue Collector popup is completely unusable.

      How to reproduce the issue.

      The site we're developing has the following configuration:

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

      When you click the Issue collector tab/button, the popup appears centered in the viewport, but the width and height are fixed at sizes way too large for the window.

      Proposed resolution

      Make the pop-up form's height and width, and layout respond to the browser frame (i.e. adaptive/responsive web design).

      Introduce media queries at various standard breakpoints to offer alternative layouts for smaller screens.


      I've been able to achieve what I need using the following snippet of CSS:

      /* Issue collector tweaks for smaller screens */
      @media screen and (max-width: 740px) {
        .atlwdg-popup {
          left: 0 !important;
          top: 0 !important;
          height: 100% !important;
          width: 100% !important;
          margin: 0 !important;
          padding: 0 !important;

      UPDATE: The pop-up is still too wide, the email field is still partially hidden and the text-area doesnt wrap below its field label, but since these elements are placed within an i-frame I have no control over their theming from my application.

      As a side note, this issue appears to affect All popups produced by Jira, and this simple code tweak could be released for a quick win on mobile devices.

            Unassigned Unassigned
            1395b40ca60f James Wilson
            0 Vote for this issue
            15 Start watching this issue