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

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

XMLWordPrintable

    • 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

      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.

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

            Geshoski Mihail Geshoski
            nadavkav Nadav Kavalerchik
            Bas Brands Bas Brands
            Andrew Lyons Andrew Lyons
            Janelle Barcega Janelle Barcega
            Votes:
            2 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

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

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.