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

Make html_tables responsive by default

    XMLWordPrintable

Details

    • 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

    Description

      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.

      Attachments

        Activity

          People

            huongn@moodle.com Huong Nguyen
            lameze Simey Lameze
            Simey Lameze Simey Lameze
            Jun Pataleta Jun Pataleta
            Angelia Dela Cruz Angelia Dela Cruz
            Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              19/Apr/22

              Time Tracking

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