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. image-2022-11-01-15-46-05-847.png
          43 kB
          Stephen Sharpe
        2. image-2022-11-01-15-46-45-603.png
          48 kB
          Stephen Sharpe
        3. 2022-11-21_10-40.png
          161 kB
          Meirza
        4. image-2022-11-21-08-18-46-520.png
          12 kB
          Stephen Sharpe
        5. simplescreenrecorder-2022-11-23_21.18.18.mp4
          2.47 MB
          Meirza
        6. comparison_at_wider_screen.png
          97 kB
          David Woloszyn
        7. comparson_at_narrower_screen.png
          70 kB
          David Woloszyn
        8. EXT1.png
          74 kB
          Simey Lameze
        9. EXT2.png
          84 kB
          Simey Lameze
        10. 2022-12-07_17-09.png
          54 kB
          Meirza
        11. EXT5.png
          58 kB
          Kim Jared Lucas
        12. longcoursename_detail.png
          40 kB
          Meirza

            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.