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

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.



Jaswinder Singh

Jaswinder Singh, passionate about using Moodle in improving the Indian Education System and reaching the students in far flung areas where still education seems to be a impossible prospect of life. He is the author of the popular Moodle Book "How to use Moodle 2.7". In October 2016, Jaswinder was elected as the Moodle User's Association Committee member - the first to make it from India.

Related Articles