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

Make html_tables responsive by default

XMLWordPrintable

    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72896-master
    • Hide

      Initial setup

      1. Create a course or use an existing one.
      2. Create a student account and enrol to the created course.
      3. Restore the backup Lesson activity in the attachment.

      Test case 1

      1. Log in as an admin account.
      2. Navigate to Site administration -> Plugins -> Plugins Overview.
      3. Turn on the developer tool of the Browser and switch to the Responsive mode window.
      4. Try to drag the Responsive window to the smaller screen until you see the horizontal scroll bar at the bottom. (Ex: 600px in width).
      5. Try to horizontal scroll the table.
      6. Verify that only the table will be scrolled.
      7. Verify that you can view all the data of the table normally.
      8. Verify that the Plugins overview header will stay on the top left corner during scroll.
      9. Verify that the Check for available updates button will stay on the top left corner during scroll.
      10. Turn off the developer tool of the Browser and turn off the Responsive mode.
      11. Change the browser zoom to 400%.
      12. Repeat the steps from 6 to 9.

      Test case 2

      1. Log in as a student account.
      2. Navigate to restored Lesson activity.
      3. Try to submit the essay in the Lesson activity.
      4. Log in as an admin account.
      5. Navigate to restored Lesson activity.
      6. Click on Report.
      7. Turn on the developer tool of the Browser and switch to the Responsive mode window.
      8. Try to drag the Responsive window to the smaller screen until you see the horizontal scroll bar at the bottom of the table. (Ex: 600px in width).
      9. Verify that you will not see the horizontal scroll for the whole page.
      10. Verify that you will see the horizontal scroll for the table only.
      11. Try to horizontal scroll the table.
      12. Verify that only the table will be scrolled.
      13. Verify that you can view all the data of the table normally.
      14. Turn off the developer tool of the Browser and turn off the Responsive mode.
      15. Change the browser zoom to 400%.
      16. Repeat the steps from 9 to 13.
      Show
      Initial setup Create a course or use an existing one. Create a student account and enrol to the created course. Restore the backup Lesson activity in the attachment. Test case 1 Log in as an admin account. Navigate to Site administration -> Plugins -> Plugins Overview. Turn on the developer tool of the Browser and switch to the Responsive mode window. Try to drag the Responsive window to the smaller screen until you see the horizontal scroll bar at the bottom. (Ex: 600px in width). Try to horizontal scroll the table. Verify that only the table will be scrolled. Verify that you can view all the data of the table normally. Verify that the Plugins overview header will stay on the top left corner during scroll. Verify that the Check for available updates button will stay on the top left corner during scroll. Turn off the developer tool of the Browser and turn off the Responsive mode. Change the browser zoom to 400%. Repeat the steps from 6 to 9. Test case 2 Log in as a student account. Navigate to restored Lesson activity. Try to submit the essay in the Lesson activity. Log in as an admin account. Navigate to restored Lesson activity. Click on Report. Turn on the developer tool of the Browser and switch to the Responsive mode window. Try to drag the Responsive window to the smaller screen until you see the horizontal scroll bar at the bottom of the table. (Ex: 600px in width). Verify that you will not see the horizontal scroll for the whole page. Verify that you will see the horizontal scroll for the table only. Try to horizontal scroll the table. Verify that only the table will be scrolled. Verify that you can view all the data of the table normally. Turn off the developer tool of the Browser and turn off the Responsive mode. Change the browser zoom to 400%. Repeat the steps from 9 to 13.
    • HQ Team International CI H2-21

      When zoomed to 400%, the content of the table is cut off and cannot be viewed as there is no ability to scroll. It appears this is an issue with the "overflow-x: auto" attribute in #region-main. This problem does not occur on a mobile device as it's possible to swipe to see this content.

      This seems to be a problem related to all tables generated by html_table output component, so ideally we should try to find a solution that would fix the problem everywhere?

      Update:
      As the approach being taken here is to try and make html_tables responsive by default, this issue has been converted to an improvement issue.

        1. backup-moodle2-activity-150-lesson150-20211102-0252-nu.mbz
          4 kB
        2. MDL-72896_Case 1_1.webm
          291 kB
        3. MDL-72896_Case 1_2.webm
          175 kB
        4. MDL-72896_Case 2_1.webm
          86 kB
        5. MDL-72896_Case 2_2.webm
          378 kB

            huongn@moodle.com Huong Nguyen
            lameze Simey Lameze
            Simey Lameze Simey Lameze
            Jun Pataleta Jun Pataleta
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 1 hour, 36 minutes
                2d 1h 36m

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