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

Book Table of Contents items overlap in Boost theme (IE 11)

XMLWordPrintable

    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • Hide

      Use a different web browser or add the following to the HEAD section of Moodle's "Additional HTML" settings:

      <style>
      .path-mod-book .book_toc li {flex-basis: auto;}
      </style>

      Show
      Use a different web browser or add the following to the HEAD section of Moodle's "Additional HTML" settings: <style> .path-mod-book .book_toc li {flex-basis: auto;} </style>
    • Easy
    • Hide

      Assuming that you already created the new course containing a book as described in the section of this ticket called Description > Reproducing the issue.

      Using Internet Explorer 11 on Windows:

      1. Log into Moodle as an Administrator
      2. Go into the course.
      3. Go into the activity containing a book.

      The list of chapters in the table of contents should no longer all be overlapping each other.

      Now repeat the same steps with the Chrome, Firefox and Safari to ensure that the fix did not break anything in those browsers. If you have them available, you could also check it with some mobile devices. However, since this is a bug specific to IE 11, it will very likely be just fine.

      Note that, as indicated in the Description section of this ticket, this fix does not address the placement issue, just the overlapping text.

      Show
      Assuming that you already created the new course containing a book as described in the section of this ticket called Description > Reproducing the issue. Using Internet Explorer 11 on Windows: Log into Moodle as an Administrator Go into the course. Go into the activity containing a book. The list of chapters in the table of contents should no longer all be overlapping each other. Now repeat the same steps with the Chrome, Firefox and Safari to ensure that the fix did not break anything in those browsers. If you have them available, you could also check it with some mobile devices. However, since this is a bug specific to IE 11, it will very likely be just fine. Note that, as indicated in the Description section of this ticket, this fix does not address the placement issue, just the overlapping text.

      When creating a book, the chapters and sub-chapters all overlap each other resulting in a jumble of text on the screen when viewed in Internet Explorer 11 on a desktop. Example:

      This displays properly in Chrome, Firefox and Edge. It only happens in the Boost core theme, not the Classic theme. However, I also noticed it in themes based on Boost as they inherits the issue.

      Reproducing the issue

      1. Login as a Moodle administrator.
      2. Ensure that the Boost theme is active (not an issue in Classic)
      3. Create a new course.
      4. Add a book to the course
      5. Add 2 chapters to the book. Just a few words in the chapter titles and content fields are sufficient.
      6. Save

      Look at the automatically generated table of contents. You will notice that all of the chapter titles overlap each other.

      Why is this an Accessibility issue?

      Because it is only readable by a screen reader.

      What I expected

      I expected the table of contents to be readable, with each chapter on a separate line.

            michael-milette Michael Milette
            michael-milette Michael Milette
            Mihail Geshoski Mihail Geshoski
            Jun Pataleta Jun Pataleta
            Ferran Recio Ferran Recio
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 5 minutes
                2h 5m

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