Moodle
  1. Moodle
  2. MDL-34040

TinyMCE preview is overlapping with the file picker in IE

    Details

    • Testing Instructions:
      Hide
      1. Use IE9
      2. Log in as admin/teacher
      3. Ensure the YouTube repository is enabled (you can use any external video repository)
      4. Ensure the Multimedia filter is enabled
      5. Navigate to a course and create a page resource
      6. In the editor click the "Moodle Media" button, the Moodle Media window should appear
      7. Click "Find or upload a sound, video or applet..."
      8. Select the YouTube repository
      9. Find a video and select it, the video preview should be shown in the Moodle Media window
      10. Again, click "Find or upload a sound, video or applet..."
      11. Make sure video markup is not overlapping filepicker and appears in front.
      12. Repeat steps above with other browsers to verify nothing is broken (FF, Safari, Chrome, Opera...)
      Show
      Use IE9 Log in as admin/teacher Ensure the YouTube repository is enabled (you can use any external video repository) Ensure the Multimedia filter is enabled Navigate to a course and create a page resource In the editor click the "Moodle Media" button, the Moodle Media window should appear Click "Find or upload a sound, video or applet..." Select the YouTube repository Find a video and select it, the video preview should be shown in the Moodle Media window Again, click "Find or upload a sound, video or applet..." Make sure video markup is not overlapping filepicker and appears in front. Repeat steps above with other browsers to verify nothing is broken (FF, Safari, Chrome, Opera...)
    • Affected Branches:
      MOODLE_20_STABLE, MOODLE_22_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE

      Description

      TinyMCE preview is overlapping with the file picker in IE (when video markup is in the preview popup)

      Steps to reproduce:

      1. Use IE9
      2. Log in as admin/teacher
      3. Ensure the YouTube repository is enabled (you can use any external video repository)
      4. Ensure the Multimedia filter is enabled
      5. Navigate to a course and create a page resource
      6. In the editor click the "Moodle Media" button, the Moodle Media window should appear
      7. Click "Find or upload a sound, video or applet..."
      8. Select the YouTube repository (or another video repository)
      9. Find a video and select it, the video preview should be shown int he Moodle Media window
      10. Again, click "Find or upload a sound, video or applet..."

      Expected result:

      • The filepicker should appear in front.

      Actual result:

      • The video markup is overlapping the filepicker.

        Gliffy Diagrams

        1. patch.txt
          0.6 kB
          Akin Delamarre
        1. IE bug.png
          186 kB

          Issue Links

            Activity

            Hide
            Akin Delamarre added a comment -

            I think this solution would fix the issue.

            If you set the wmode to "opaque" the object tag no longer overlaps

            <param value="opaque" name="wmode">
            

            This is something that should be added to the Multimedia filter because other external repository (that embed flash on the page) plug-ins will experience the same thing.

            Show
            Akin Delamarre added a comment - I think this solution would fix the issue. If you set the wmode to "opaque" the object tag no longer overlaps <param value="opaque" name="wmode"> This is something that should be added to the Multimedia filter because other external repository (that embed flash on the page) plug-ins will experience the same thing.
            Hide
            Michael de Raadt added a comment -

            Thanks for reporting that. I was able to reproduce the problem in 2.2.x. I wasn't able to reproduce the issue in 2.3, but that is because the preview is broken in the Moodle Media window in 2.3, so it could still be a possible problem there.

            Thanks for suggesting a solution.

            Show
            Michael de Raadt added a comment - Thanks for reporting that. I was able to reproduce the problem in 2.2.x. I wasn't able to reproduce the issue in 2.3, but that is because the preview is broken in the Moodle Media window in 2.3, so it could still be a possible problem there. Thanks for suggesting a solution.
            Hide
            Akin Delamarre added a comment -

            Attaching patch.

            One thing to note though is that when wmode is set to opaque the filepicker window cannot be moved. This only seems to be the case in IE though.

            Show
            Akin Delamarre added a comment - Attaching patch. One thing to note though is that when wmode is set to opaque the filepicker window cannot be moved. This only seems to be the case in IE though.
            Hide
            Rajesh Taneja added a comment -

            Thanks for the patch Akin, I am using wmode="transparent", as this is what we are using in 2.3+.

            This problem is only visible in 22 branch as in 2.3+ moodlemedia plugin has been modified and in embed url we pass wmode=transparent (lib/medialib.php line 543- src="https://$site/embed/$videoid?rel=0&wmode=transparent")

            As per adode documentation, wmode is not set will be default to window and hence this problem was visible. Not constrained to ie, as this should be set properly.

            Show
            Rajesh Taneja added a comment - Thanks for the patch Akin, I am using wmode="transparent", as this is what we are using in 2.3+. This problem is only visible in 22 branch as in 2.3+ moodlemedia plugin has been modified and in embed url we pass wmode=transparent (lib/medialib.php line 543- src="https://$site/embed/$videoid?rel=0&wmode=transparent") As per adode documentation , wmode is not set will be default to window and hence this problem was visible. Not constrained to ie, as this should be set properly.
            Hide
            Frédéric Massart added a comment -

            Hi Raj, things look good. I just think that you actually have to create a patch for out custom TinyMCE implementation. See http://tracker.moodle.org/browse/MDL-33982?focusedCommentId=169612&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-169612 and following comments.

            Push for integration whenever you're ready!

            Show
            Frédéric Massart added a comment - Hi Raj, things look good. I just think that you actually have to create a patch for out custom TinyMCE implementation. See http://tracker.moodle.org/browse/MDL-33982?focusedCommentId=169612&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-169612 and following comments. Push for integration whenever you're ready!
            Hide
            Rajesh Taneja added a comment -

            Thanks Fred,

            I have created custom_tinymce branch as well.
            Branch: wip-mdl-34040-plugin
            Diff: https://github.com/rajeshtaneja/moodle/compare/MOODLE_22_3.4.6...wip-mdl-34040-plugin

            Show
            Rajesh Taneja added a comment - Thanks Fred, I have created custom_tinymce branch as well. Branch: wip-mdl-34040-plugin Diff: https://github.com/rajeshtaneja/moodle/compare/MOODLE_22_3.4.6...wip-mdl-34040-plugin
            Hide
            Eloy Lafuente (stronk7) added a comment -

            (adding one extra step to verify this doesn't cause any regression in other browsers)

            Show
            Eloy Lafuente (stronk7) added a comment - (adding one extra step to verify this doesn't cause any regression in other browsers)
            Hide
            Aparup Banerjee added a comment -

            hm, i was wondering where the custom-tinymce branch is (moodlehq's or skodak's). i can't find the maintained one for 22.

            anyway integrating into moodle_22_stable only now for testing.

            Show
            Aparup Banerjee added a comment - hm, i was wondering where the custom-tinymce branch is (moodlehq's or skodak's). i can't find the maintained one for 22. anyway integrating into moodle_22_stable only now for testing.
            Hide
            Adrian Greeve added a comment -

            I tested this with the following browsers:

            • IE9
            • Safari
            • Opera
            • Chrome

            The file picker isn't overlapping with the preview pane any more. No other problems found.
            Test passed.

            Show
            Adrian Greeve added a comment - I tested this with the following browsers: IE9 Safari Opera Chrome The file picker isn't overlapping with the preview pane any more. No other problems found. Test passed.
            Hide
            Petr Skoda added a comment -

            Hi, I have most probably used some 23 branch for the latest import of TinyMCE, so it is fine to just commit it to MOODLE_22_SATBLE if this was already fixed in 23 or if it is irrelevant there.

            Show
            Petr Skoda added a comment - Hi, I have most probably used some 23 branch for the latest import of TinyMCE, so it is fine to just commit it to MOODLE_22_SATBLE if this was already fixed in 23 or if it is irrelevant there.
            Hide
            Rajesh Taneja added a comment -

            Thanks Petr,

            It is not relevant to 23+.

            Show
            Rajesh Taneja added a comment - Thanks Petr, It is not relevant to 23+.
            Hide
            Eloy Lafuente (stronk7) added a comment -

            I'm so proud...of you, many thanks!

            http://youtu.be/n64CdfDRnZY

            Closing as fixed, ciao

            Show
            Eloy Lafuente (stronk7) added a comment - I'm so proud...of you, many thanks! http://youtu.be/n64CdfDRnZY Closing as fixed, ciao

              People

              • Votes:
                2 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: