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

Issue Collector popup display broken on responsive mobile sites

    XMLWordPrintable

    Details

      Description

      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.

      Workaround

      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.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              jwilson3 James Wilson
              Votes:
              0 Vote for this issue
              Watchers:
              15 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: