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

TinyMCE modal doesn't display nicely on mobile on the forum page

XMLWordPrintable

    • MOODLE_500_STABLE
    • MOODLE_500_STABLE
    • MDL-85077-main
    • Hide

      Setup

      1. Login as administrator
      2. Create some users
      3. Create a new course
      4. Create a new forum activity
      5. Add 2 posts in the forum activity
      6. Simulate a mobile page width. This can be done with the browser inspector or by setting the window width between 320px and 425px.

      Test forum table

      1. Go to the forum activity
      2. Confirm you can scroll horizontally the table contents
      3. Confirm that the action menus in the forum table are correctly displayed (not cropped)
      4. Click on Add discussion topic
      5. Click on Insert image on the tinyMCE editor
      6. Confirm that the modal is correctly displayed
      7. Click on Record audio on the tinyMCE editor
      8. Confirm that the modal is correctly displayed

      Test Report builder table

      1. Go to Reports under the user menu
      2. Create a new report
      3. Confirm you can scroll horizontally the table contents
      4. Confirm that the action menus in the table are correctly displayed (not cropped)

      Browser users table

      1. Go to Site administration > Users > Browse list of users
      2. Confirm you can scroll horizontally the table contents
      3. Confirm that the action menus in the table are correctly displayed (not cropped)
      Show
      Setup Login as administrator Create some users Create a new course Create a new forum activity Add 2 posts in the forum activity Simulate a mobile page width. This can be done with the browser inspector or by setting the window width between 320px and 425px. Test forum table Go to the forum activity Confirm you can scroll horizontally the table contents Confirm that the action menus in the forum table are correctly displayed (not cropped) Click on Add discussion topic Click on Insert image on the tinyMCE editor Confirm that the modal is correctly displayed Click on Record audio on the tinyMCE editor Confirm that the modal is correctly displayed Test Report builder table Go to Reports under the user menu Create a new report Confirm you can scroll horizontally the table contents Confirm that the action menus in the table are correctly displayed (not cropped) Browser users table Go to Site administration > Users > Browse list of users Confirm you can scroll horizontally the table contents Confirm that the action menus in the table are correctly displayed (not cropped)
    • Hide

      Code verified against automated checks.

      Checked MDL-85077 using repository: https://github.com/roland04/moodle.git

      More information about this report

      Built on: Wed Apr 9 13:50:00 UTC 2025

      Show
      Code verified against automated checks. Checked MDL-85077 using repository: https://github.com/roland04/moodle.git main (0 errors / 0 warnings) [branch: MDL-85077-main | CI Job ] More information about this report Built on: Wed Apr 9 13:50:00 UTC 2025
    • Hide

      Launching automatic jobs for branch MDL-85077-main

      Built on: Thu Apr 10 08:06:08 UTC 2025

      Show
      Launching automatic jobs for branch MDL-85077 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18971/ PHPUnit (sqlsrv / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64929/ Behat (NonJS - boost and classic / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64930/ Behat (Firefox - boost / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64931/ Behat (Firefox - classic / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64932/ App tests (stable app version) / complete) Built on: Thu Apr 10 08:06:08 UTC 2025
    • 3
    • HQ 2025 Sprint I1.4 Moppies

      Discovered by moien.abadi while testing MDLQA-20099 using Android mobile with Chrome:

      The modal opened by TiniMCE is incorrectly displayed, caused by an empty horizontal blank space with scroll.

      Another different but directly related problem was detected in MDL-84749 that needs to be addressed globally in this issue, because both fixes could impact each other:

      Description copied from original issue
      There is a bug where the action menu dropdown is being cropped (triggered via the ellipses).

      To reproduce:

      1. Go to a courses forum
      2. Add a discussion topic
      3. Enter in any text and save
      4. Once the topic has been added, click on the ellipses action menu inside the table row.
      5. Observe that the dropdown menu is cropped.

        1. (1) 2 Passed -- (Main)MDL-85077.png
          27 kB
          Kim Jared Lucas
        2. (1) 3 Passed -- (Main)MDL-85077.png
          37 kB
          Kim Jared Lucas
        3. (1) 6 Passed -- (Main)MDL-85077.png
          28 kB
          Kim Jared Lucas
        4. (1) 8 Passed -- (Main)MDL-85077.png
          25 kB
          Kim Jared Lucas
        5. (2) 3 Passed -- (Main)MDL-85077.png
          29 kB
          Kim Jared Lucas
        6. (2) 4 Passed -- (Main)MDL-85077.png
          36 kB
          Kim Jared Lucas
        7. (3) 3 Passed -- (Main)MDL-85077.png
          30 kB
          Kim Jared Lucas
        8. MDL-85077_tinymce_modal_notable.jpg
          108 kB
          Meirza
        9. MDL-85077_tinymce_modal.jpg
          90 kB
          Meirza
        10. MDL-85077.jpg
          66 kB
          Simey Lameze
        11. screenshot-1.png
          73 kB
          Mikel Martín Corrales
        12. screenshot-2.png
          51 kB
          Mikel Martín Corrales
        13. screenshot-3.png
          53 kB
          Mikel Martín Corrales
        14. screenshot-4.png
          33 kB
          Mikel Martín Corrales
        15. screenshot-5.png
          68 kB
          Mikel Martín Corrales
        16. screenshot-6.png
          69 kB
          Mikel Martín Corrales

            mikelmartíncorrales Mikel Martín Corrales
            lameze Simey Lameze
            Ferran Recio Ferran Recio
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 56 minutes
                56m

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