Course Module List Misaligned Due to Padding-Left

Issue #217 resolved
Ben Wu created an issue

Description: When clicking on a tile on the course home page, the course module list (`<ul class="format-tiles-cm-list nosubtiles">`) now has a 40px padding-left that was not present in many previous versions of the plugin. This alignment issue causes course modules within the tile to no longer be centered on the page.

Moodle version: Moodle 4.1.12 Stable (Build: 20240812)

Plugin version: 4.1.1.6 , 4.1.1.12, 4.1.1.15

Steps to Replicate:

  1. Create a new course with the Tiles Format enabled.
  2. Within a tile, add course modules (e.g. Quiz).
  3. Click on the tile and observe that the added course modules are not centered as they were in many earlier versions (e.g., 4.1.0.2).
  4. Use browser developer tools to inspect the `<ul class="format-tiles-cm-list nosubtitles">` node. In the Computed tab, check for the existence of a 40px padding-left.
  5. Remove the 40px padding-left using the developer tools and observe if the course modules revert to a centered alignment, restoring the expected layout.

Suggestion:

By comparing the new layout (4.1.1.15) with an old layout (4.1.0.2), it seems that adding a `section` class to the `<ul>` node restores the previous good alignment, specifically leveraging the CSS rule `padding: 1.2em`. It is suggested to incorporate this style adjustment in the relevant CSS for the `<ul class="format-tiles-cm-list nosubtitles">` node to re-align the course module list in the expected center position.

Comments (2)

  1. David Watson repo owner

    Thanks Ben I have put a fix into the Moodle 43 branch and this will be merged into other branches on the next releases

  2. Log in to comment