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

Moving course section creates a new unordered list within the outer list

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • 2.6.2
    • Course
    • MOODLE_26_STABLE

      Each section of a course is structured as a list item within one unordered list. Highly simplified example:

      <ul>
      <li>section one</li>
      <li>section two</li>
      </ul>
      

      When you move a section via clicking the crosshairs and selecting a destination via the popup dialog, the section you moved is placed within a new unordered list element inside the list item inside the main unordered list. Again, highly simplified and assuming that section one was moved to section two:

      <ul>
      <li>section two</li>
      <li>
      <ul>
      <li>section one</li>
      </ul>
      </li>
      </ul>
      

      Refreshing the page puts everything back to how one would expect with just one unordered list containing list items for the sections and no sub-lists.

      In any theme that does not have margins on the list items, the appearance (before refreshing) is simply that the moved section has a slightly thicker border. Each list item has a 1px solid border, so the nested list items with no margins effectively produce a 2px solid border. See the screenshot moved_section_no_margins.png.

      Without looking at what's happening in the HTML, the thicker border appears that it could be intended behavior to highlight the moved section. If that were the case, I would expect the border to be restyled, not for the section to be moved into a new list within the main list.

      The problem is most obvious if a theme has margins on the list items (which is a valid case). In this case, the border of the section is not simply 2px instead of 1px. What you get is nested boxes that look messy and certainly do not appear to be intended behavior. See the screenshot moved_section_with_margins.png.

      Steps to reproduce:

      1. Start with a course in topics or weekly format and multiple sections.
      2. Open the developer tools of your browser so you can inspect elements.
      3. Turn editing on.
      4. Click the crosshairs of the first section.
      5. Choose any destination in the popup dialog.
      6. Depending on your theme, the moved section may now have either a slightly thicker border or a nested box situation.
      7. Using the developer tools, inspect the element of the moved section and note the new <ul> in the <li> in the outer <ul>.

            Unassigned Unassigned
            cfollin Chris Follin
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

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