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

mod_label messes up layout if content width too big

    XMLWordPrintable

Details

    • Improvement
    • Status: Waiting for peer review
    • Minor
    • Resolution: Unresolved
    • 4.0.1, 4.0.3
    • None
    • Course
    • MOODLE_400_STABLE
    • MDL-75118-MOODLE_400_STABLE
    • MDL-75118-master
    • Hide
      1. Create a course
      2. Add a label
      3. insert an image with a big width (1200px for example, should be more than the course content width in your current browser window)
      4. Without patch: Overflow will happen, course content will have a scrollbar, see screenshots
      5. With patch: Label will have a scrollbar added, no overflow, course layout will be fine, see other screenshot
      6. This behavior can be observed in boost as well as in classic theme, fix works for both.
      Show
      Create a course Add a label insert an image with a big width (1200px for example, should be more than the course content width in your current browser window) Without patch: Overflow will happen, course content will have a scrollbar, see screenshots With patch: Label will have a scrollbar added, no overflow, course layout will be fine, see other screenshot This behavior can be observed in boost as well as in classic theme, fix works for both.

    Description

      If the content's width of a mod_label (for example an inserted picture) is too high the whole label will expand beyond the border set by the current format/theme, see screenshot. In Topics format this is not that bad, it is "just" being cut off and looks a bit ugly. However, you cannot access the cut off content at all. In other course formats this could be even worse, see screenshot of tiles_format.

       

      I suggest to add overflow-x: auto to the selector .activity-item .contentwithoutlink

      This at least does not mess up the whole course layout.

      Attachments

        Issue Links

          Activity

            People

              phmemmel PhMemmel
              phmemmel PhMemmel
              Amaia Anabitarte, Bas Brands, Carlos Escobedo, Laurent David, Sabina Abellan, Sara Arjona (@sarjona)
              Votes:
              9 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:

                Time Tracking

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