Adjusting default composer height

:bookmark: This guide explains how to customize the default height of the composer when creating new topics or replies in Discourse.

:person_raising_hand: Required user level: Administrator or Theme Developer

Overview

Discourse allows you to customize the default height of the composer when users create new topics or reply to existing ones. This can improve the user experience by providing a more comfortable editing space based on your community’s needs.

Setting custom composer heights

Discourse provides two CSS custom properties that control the default composer heights:

  • --reply-composer-height
    Controls the initial height when replying to a topic

  • --new-topic-composer-height
    Controls the initial height when creating a new topic

To modify these values, add the following CSS to your theme:

:root {
    --reply-composer-height: 255px;  
    --new-topic-composer-height: 400px;
}

Adjust the pixel values to meet your specific requirements. The default values shown above are examples only.

User preferences

:information_source: These CSS changes only affect the initial default height. If users manually resize their composer by dragging the handle, Discourse will remember their preferred height setting for future sessions. User preferences always take precedence over these default values.

Where to add this code

The recommended way is to create a new theme component with these changes. You can follow the guide for making custom CSS changes on your site.

Testing your changes

After applying these changes, create a new topic and reply to an existing one to verify the composer appears at your desired height.

6 Likes