Rich Text widget default font size not applied when typing

Issue

A discrepancy may be observed when a Default Font Size is configured in the Rich Text widget. Although the configured font size (for example, 16px) is displayed in the font size dropdown when the editor is opened, newly entered text is rendered using a different font size.

The configured font size is only applied after the entered text is selected and the desired font size is manually chosen from the toolbar.

Environment

Rich Text (all versions)

Cause

This behavior is expected and is documented in the Rich Text widget documentation.

The Default Font Size setting is used only to configure the initial value displayed in the font size dropdown when no font size has been explicitly applied. A font-size style is not assigned to the editor's content through this setting.

As documented:

Default font size – configures initial font size to be shown in the dropdown of font size in the toolbar if no font sizes are set. This configuration only adjusts the font size toolbar with the page’s default font size. No font size value is being set to the editor’s text directly. The value set should be available in the font size toolbar selections.

Solution/Workaround

As a workaround, the default font size can be enforced by overriding the widget's styles using a custom CSS class targeting the content-editable area of the RichText widget. Apply the following CSS in your theme stylesheet, replacing 14px with your desired font size:

1. Open your Mendix app's theme stylesheet (e.g., custom-variables.scss or a custom CSS file).

2. Add the following CSS rule, scoped to the page or widget container class as appropriate: 
    

   .widget-rich-text .ql-container {
       font-size: 14px;
   }

Additional information

• Mendix documentation:
  • Rich Text
  • Marketplace - Rich Text