Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-60621

Improvement of modal UI when modal exceeds the height of the browser

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test this using multiple browsers and multiple screen resolutions.

      Test 1 (The height of the modals should not exceed the height of the browser)

      1. Login as Admin.
      2. Create a Course.
      3. Go to the Course.
      4. Click on any 'Add an activity or resource' link to activate the activity chooser.
      5. In the activity chooser, click on the "Assignment" activity.
      6. In the "Adding a new Assignment.." page, In the "Submission types" section, click on the "Choose" button (related to the "Accepted file types" field)
        1. make sure the height of the "Accepted file types" modal is less than the browser's height.
        2. inspect the code and make sure there is a class "modal-dialog-scrollable" attached to the div element with class "modal-dialog"
        3. make sure the action buttons ("Save changes", "Cancel") in the footer area are visible at all times.
        4. make sure there is a vertical scrollbar, allowing to view the rest of the content in the modal's body.

      Test 2 (The activity chooser modal is an exception and it's height should exceed the height of the browser in given situations)

      1. Login as Admin.
      2. Create a Course.
      3. Go to the Course.
      4. Click on any 'Add an activity or resource' link to activate the activity chooser.
      5. Once the activity chooser is displayed, click on the "All" tab and resize the browser window so it's height is less than the height of the modal.
        1. make sure the height of the "Activity chooser" modal exceeds beyond the browser's height.
        2. inspect the code and make sure there is a class "modal-dialog-scrollable"  is NOT present in the div element with class "modal-dialog"
        3. make sure a vertical scrollbar is NOT present in the modal's body.
      Show
      Please test this using multiple browsers and multiple screen resolutions. Test 1 (The height of the modals should not exceed the height of the browser) Login as Admin. Create a Course. Go to the Course. Click on any 'Add an activity or resource' link to activate the activity chooser. In the activity chooser, click on the "Assignment" activity. In the "Adding a new Assignment.." page, In the " Submission types " section, click on the " Choose " button (related to the " Accepted file types " field) make sure the height of the "Accepted file types" modal is less than the browser's height. inspect the code and make sure there is a class "modal-dialog-scrollable" attached to the div element with class "modal-dialog" make sure the action buttons ("Save changes", "Cancel") in the footer area are visible at all times. make sure there is a vertical scrollbar, allowing to view the rest of the content in the modal's body. Test 2 (The activity chooser modal is an exception and it's height should exceed the height of the browser in given situations) Login as Admin. Create a Course. Go to the Course. Click on any 'Add an activity or resource' link to activate the activity chooser. Once the activity chooser is displayed, click on the "All" tab and resize the browser window so it's height is less than the height of the modal. make sure the height of the "Activity chooser" modal exceeds beyond the browser's height. inspect the code and make sure there is a class "modal-dialog-scrollable"  is NOT present in the div element with class "modal-dialog" make sure a vertical scrollbar is NOT present in the modal's body.
    • Affected Branches:
      MOODLE_34_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE
    • Pull Master Branch:
      MDL-60621-master-1
    • Sprint:
      3.9 release work board, 4.0 holding pattern

      Description

      The UI can be improved in modals, when the modal's height exceeds the height of the browser. One practical example is the "Accepted file types" modal which has very large content,and the "Save changes" (and "Cancel") buttons are too far off screen, that it is unclear for the user what to do, initially.

      Steps to reproduce:

      1. Login as Admin.
      2. Create a Course.
      3. Go to the Course.
      4. Click on any 'Add an activity or resource' link to activate the activity chooser.
      5. In the activity chooser, click on the "Assignment" activity.
      6. In the "Adding a new Assignment.." page, In the "Submission types" section, click on the "Choose" button (related to the "Accepted file types" field)

      The modal is too long, the user is not immediately aware of the action buttons and it requires long scrolling to get to them.

      This can be replicated with any modal by manually extending it's content.

        Attachments

        1. capture-for-jira-screenshot-20171029-104821-531.png
          capture-for-jira-screenshot-20171029-104821-531.png
          174 kB
        2. modal-old.png
          modal-old.png
          93 kB
        3. modal-patch.png
          modal-patch.png
          80 kB
        4. Screenshot_1.png
          Screenshot_1.png
          157 kB
        5. Screenshot_1-1.png
          Screenshot_1-1.png
          145 kB
        6. Screenshot_2.png
          Screenshot_2.png
          112 kB
        7. Screenshot_2-1.png
          Screenshot_2-1.png
          176 kB

          Issue Links

            Activity

              People

              Assignee:
              Geshoski Mihail Geshoski
              Reporter:
              nadavkav Nadav Kavalerchik
              Peer reviewer:
              Bas Brands
              Integrator:
              Andrew Nicols
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Barbara Ramiro, Bas Brands
              Votes:
              2 Vote for this issue
              Watchers:
              13 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                9/Nov/20

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 7 hours, 3 minutes
                  7h 3m