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

Long course names and course id exceeding available space on the manage courses and categories page

XMLWordPrintable

    • MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MDL-76145-401
    • MDL-76145-master
    • Hide
      1. Create a course
        1. Full name with a long text (with or without spaces) for example: mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        2. Course ID with a long text (with or without spaces) for example: 
          wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      2. Go to Site administration>>Courses>>Manage courses and categories
      3. Verify that the course with a long text looks tidy and not exceed the available space on all screen sizes (responsive)
      Show
      Create a course Full name with a long text (with or without spaces) for example: mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm Course ID with a long text (with or without spaces) for example:  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww Go to Site administration>>Courses>>Manage courses and categories Verify that the course with a long text looks tidy and not exceed the available space on all screen sizes (responsive)
    • 2
    • Team Hedgehog Sprint 1.2

      • Create a course with a really long name (example being sdnfkjsdfkjsdfkjsdkfhskdfjhksdhfkhsdfkjhsdkjfhsdkjfhskjdfhksdjfhksdhsdf)
      • Visit the course management page and select the category of the course in question.
      • On review of the course list, you can see how the name wraps but once it has no space to wrap within the course list container, it expands beyond the available space. This applies on all screen sizes

      Possible solution:

      • Utilise the class d-flex to replace the parent container .clearfix
      • Append the classes text-break mr-auto to the course name container
      • Append flex-shrink-0 ml-3 to the action icons container
      Before After

        1. 2022-11-21_10-40.png
          2022-11-21_10-40.png
          161 kB
        2. 2022-12-07_17-09.png
          2022-12-07_17-09.png
          54 kB
        3. comparison_at_wider_screen.png
          comparison_at_wider_screen.png
          97 kB
        4. comparson_at_narrower_screen.png
          comparson_at_narrower_screen.png
          70 kB
        5. EXT1.png
          EXT1.png
          74 kB
        6. EXT2.png
          EXT2.png
          84 kB
        7. EXT5.png
          EXT5.png
          58 kB
        8. image-2022-11-01-15-46-05-847.png
          image-2022-11-01-15-46-05-847.png
          43 kB
        9. image-2022-11-01-15-46-45-603.png
          image-2022-11-01-15-46-45-603.png
          48 kB
        10. image-2022-11-21-08-18-46-520.png
          image-2022-11-21-08-18-46-520.png
          12 kB
        11. longcoursename_detail.png
          longcoursename_detail.png
          40 kB
        12. simplescreenrecorder-2022-11-23_21.18.18.mp4
          2.47 MB

            meirza.arson@moodle.com Meirza
            stephen.sharpe Stephen Sharpe
            David Woloszyn David Woloszyn
            Andrew Lyons Andrew Lyons
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 25 minutes
                1d 25m

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