Moodle Tip – How to make vertical scrollbars for the course description

AI in Education Leaderboard Post Page
Ai In Education Square Post Page

--- Advertisement ---

Recently while doing a project I stumbled upon a problem about the very long course summary text which appears very bad on the front page course descriptions, so I thought of implementing the vertical scrolls in the course summary area for the courses which are having a large text in the course summary field.
After doing a bit of search in Moodle forums, I came up to the solution provided by Guillermo Madero in one of the forum threads. The solution uses the div tag for using CSS to control the number of characters displayed in the course summary area.
In short, the solution for making vertical scrollbars in the course summary area are:

  1. Go to the course settings page for which you want to limit the course summary text.
  2. Click the HTML button in your text editor to open the course description in the HTML mode.
  3. write the following line as the first html line:
    • <div style=”max-height:120px; overflow-y:scroll;”>
  4. write the following line as the last html line after your complete course summary:
    • </div>
  5. Click Save changes at the bottom of the page and see there will be vertical scrollbars and the course summary text is then limited to 120 characters only. You can change the limit as required by changing the number mentioned in step-3.

Vertical scrollbars
Vertical scollbars in course summary

Hope this small tip can help someone.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

The Latest

The eLearn Podcast

--- Advertisement ---

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.