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

Details

    • 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

    Description

      • 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

      Attachments

        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

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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