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

TinyMCE can't be resized and doesn't scroll for wide content, especially on small screens

    XMLWordPrintable

    Details

    • Database:
      Any
    • Testing Instructions:
      Hide

      In Chrome/Safari, Firefox and IE:

      1. Configure tinyMCE settings, replacing one | with "wrap" for each toolbar row
      2. View a page with tinymce with the browser window > 480px wide
      3. Verify tinymce looks normal, and can be resized down to the width of the longest toolbar.
      4. View the same page on a browser window < 480px wide
      5. Verify the tinymce toolbar is broken into more rows (at the "wrap") point and the editor fits on the screen.
      6. Switch to a RTL language
      7. View the page again
      8. Verify the tinymce toolbar is broken into more rows (odd alignment is a known issue - needs discussion)

      Upgrade testing.

      1. Install a clean 2.6dev site from before this patch.
      2. Upgrade to the latest integration with this patch installed.
      3. Verify the tinymce toolbar settings include one wrap plugin for each toolbar.
      1. Install a clean 2.6dev site from before this patch.
      2. Customise the tinymce toolbars setting.
      3. Upgrade to the latest integration with this patch installed.
      4. Verify the tinymce toolbar settings includes one wrap plugin for each toolbar.
      Show
      In Chrome/Safari, Firefox and IE: Configure tinyMCE settings, replacing one | with "wrap" for each toolbar row View a page with tinymce with the browser window > 480px wide Verify tinymce looks normal, and can be resized down to the width of the longest toolbar. View the same page on a browser window < 480px wide Verify the tinymce toolbar is broken into more rows (at the "wrap") point and the editor fits on the screen. Switch to a RTL language View the page again Verify the tinymce toolbar is broken into more rows (odd alignment is a known issue - needs discussion) Upgrade testing. Install a clean 2.6dev site from before this patch. Upgrade to the latest integration with this patch installed. Verify the tinymce toolbar settings include one wrap plugin for each toolbar. Install a clean 2.6dev site from before this patch. Customise the tinymce toolbars setting. Upgrade to the latest integration with this patch installed. Verify the tinymce toolbar settings includes one wrap plugin for each toolbar.
    • Affected Branches:
      MOODLE_20_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-23646-master
    • Story Points:
      20
    • Sprint:
      FRONTEND Sprint 2

      Description

      When editing an HTML page in 2.0 on a Netbook (I think the one I saw was an eeePC) the screen is so small that the dragging handle of TinyMCE gets cut off and the whole thing is pretty well useless - see http://screencast.com/t/NmE1ODEwM for an example. No idea if this is something which is fixable by setting the default width of the editor based on the width of the browser, but thought I'd mention it anyway...

      Replication steps:

      1. Log in as admin
      2. Navigate to Site admin > Appearance > Site selector
      3. Choose a theme with blocks on the right, such as Binarus
      4. Navigate to a course
      5. Create a page resource
      6. Reduce the size of the browser window and note the effect on the HTML editor

      Expected result: The HTML editor resizes down before it is covered by blocks on the right.

      Actual result: The right edge of the HTML editor disappears under the blocks.

        Attachments

        1. no problems with standard theme.jpg
          no problems with standard theme.jpg
          18 kB
        2. screenshot-1.jpg
          screenshot-1.jpg
          60 kB
        3. tinyMCEwrap.png
          tinyMCEwrap.png
          312 kB
        4. with_overflow_auto.jpg
          with_overflow_auto.jpg
          90 kB

          Issue Links

            Activity

              People

              • Votes:
                10 Vote for this issue
                Watchers:
                14 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  18/Nov/13