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

Large images with automatic resizing may display scroll bars with some alignment settings

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.9.3, 3.0, 3.0.6, 3.1.2
    • Fix Version/s: 3.0.7, 3.1.3
    • Component/s: HTML Editor (Atto), Themes
    • Labels:
    • Environment:
      Windows, Chrome version 46
    • Testing Instructions:
      Hide

      New Images

      1. In a course create a label
      2. Add an image that is very wide (for example: wide-image.png) with the following settings:
        • Auto size: checked
        • Alignment: Top
      3. Save the image
      4. Save the label
      5. Check that the image has no horizontal scroll bar

      Repeat for the alignments of Middle, Bottom, Left and Right

      1. Edit one of the labels you added
      2. Select the image
      3. Click on the image button
      4. Uncheck the Auto size option
      5. Save the image and the label
      6. Check that the image correctly has a horizontal scroll bar

      Add some small images (for example: small-black-square.png) and check that each alignment still has a different alignment

      Run similar tests for activities that can have an image added to them with Atto

      Pre-fix images

      1. In a Moodle without this patch applied add images using each alignment to a label, in a forum, on a page etc.
      2. Apply this patch to Moodle
      3. For each image created in step 1 bring up the plugins image dialog. Check that the alignment is listed as you set it originally set it
      4. Click Save image.
      5. If you use the look in the Atto source viewer you should see that the image now has a class that starts with: atto_image_button_
      6. Any non-custom style should have been removed

      Custom styles

      1. Add an image to a label and add a custom style attribute to it via the html editing view in atto (i.e. style="border: 5px solid red;")
      2. Select the image
      3. Click on the image button
      4. Change the alignment
      5. Save the image
      6. The custom style should still be present (i.e. still have a solid red border)
      Show
      New Images In a course create a label Add an image that is very wide (for example: wide-image.png ) with the following settings: Auto size: checked Alignment: Top Save the image Save the label Check that the image has no horizontal scroll bar Repeat for the alignments of Middle, Bottom, Left and Right Edit one of the labels you added Select the image Click on the image button Uncheck the Auto size option Save the image and the label Check that the image correctly has a horizontal scroll bar Add some small images (for example: small-black-square.png ) and check that each alignment still has a different alignment Run similar tests for activities that can have an image added to them with Atto Pre-fix images In a Moodle without this patch applied add images using each alignment to a label, in a forum, on a page etc. Apply this patch to Moodle For each image created in step 1 bring up the plugins image dialog. Check that the alignment is listed as you set it originally set it Click Save image. If you use the look in the Atto source viewer you should see that the image now has a class that starts with: atto_image_button_ Any non-custom style should have been removed Custom styles Add an image to a label and add a custom style attribute to it via the html editing view in atto (i.e. style="border: 5px solid red;") Select the image Click on the image button Change the alignment Save the image The custom style should still be present (i.e. still have a solid red border)
    • Affected Branches:
      MOODLE_29_STABLE, MOODLE_30_STABLE, MOODLE_31_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE, MOODLE_31_STABLE
    • Pull from Repository:
    • Pull Master Branch:

      Description

      Steps to reproduce

      1. In a course create a label
      2. Add an image that is very wide (for example: wide-image.png) with the following settings:
        • Auto size: checked
        • Alignment: Top, Middle or Bottom
      3. Save the image
      4. Save the label

      Outcome

      The image has a horizontal scroll bar

      Expected outcome

      The image will fit the page so have no scroll bar (not this occurs if the alignment is set to either left or right)

        Attachments

        1. left-or-right-aligned.png
          left-or-right-aligned.png
          300 kB
        2. small-black-square.png
          small-black-square.png
          0.6 kB
        3. top-middle-bottom-aligned.png
          top-middle-bottom-aligned.png
          299 kB
        4. wide-image.png
          wide-image.png
          1.33 MB

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                6 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  14/Nov/16