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

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

    XMLWordPrintable

Details

    • MOODLE_34_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE
    • MDL-60621-master-1
    • 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.
    • 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

              Geshoski Mihail Geshoski
              nadavkav Nadav Kavalerchik
              Bas Brands Bas Brands
              Andrew Lyons Andrew Lyons
              Janelle Barcega Janelle Barcega
              Adrian Greeve, Ilya Tregubov, Kevin Percy, Mathew May, Mihail Geshoski, Shamim Rezaie, Huong Nguyen, Barbara Ramiro, Bas Brands, Mathew May, David Woloszyn, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo
              Votes:
              2 Vote for this issue
              Watchers:
              13 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                9/Nov/20

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 1 hour, 3 minutes
                  1d 1h 3m