Articles in this section

Rich Text Editor Toolbar Modes in Bold BI

Published:

Overview

The text widget in Bold BI is a powerful Rich Text Editor that allows users to create formatted content, including bold, italics, hyperlinks, tables, images, and more. Its toolbar dynamically adapts to the size of the text editor, switching between two modes: Inline and Floating.
This adaptive behavior ensures optimal usability, the toolbar remains accessible without cluttering small editors or taking up unnecessary space.

Inline Mode: (default for smaller sizes): The toolbar appears directly within the editor, typically activated by selecting text. It is used when space is limited and a full floating toolbar cannot fit.
Floating Mode: The toolbar remains visible at the top of the editor and provides access to the available formatting options. This mode is activated when the Text widget has sufficient space to display the complete toolbar.

This dynamic classification is built into the Text widget and requires no manual configuration beyond resizing the widget.

Steps to Verify and Adjust Toolbar Modes:

  1. Open the Text Widget in Edit Mode.

    • In the Dashboard Designer, add or select an existing text widget.
    • Click the Edit icon on the widget to enter the Rich Text Editor.
    • Resize the widget (drag corners/edges) to different sizes and observe how the toolbar behaves as you make it smaller or larger.
      image.png
  2. Inline Mode (For Limited Space)
    When the Text widget is small (or resized smaller), the toolbar switches to Inline Mode.

    • The toolbar appears when content is selected within the editor. This mode is automatically used when the widget does not have enough space to display a floating toolbar.
    • Activate it by selecting any text content, and the toolbar appears inline near the selection.
    • This mode saves space and is ideal for compact dashboard layouts.
      image.png
  3. Floating Mode (For Ample Space)
    Increase the size of the Text widget (drag to make it larger) until it meets the required dimensions based on your screen resolution.

    • The toolbar switches to Floating Mode.
    • It appears as a separate, floating panel (often above the selection) with full toolbar options.
    • This mode provides better access to all formatting tools when space allows.
      image.png

If the toolbar does not switch between modes:
• Verify that the widget size has been significantly increased or reduced.
• Exit and re-enter the Text widget edit mode.
• Refresh the page and reopen the editor.

Conclusion

The dynamic toolbar in Bold BI’s Text widget (Rich Text Editor) intelligently switches between Inline and Floating modes based on available space, enhancing usability across different dashboard layouts and screen sizes. By resizing the widget and following the verification steps, you can easily observe and ensure the optimal mode activates. This responsive design makes formatting rich content intuitive and efficient.

Additional Resources

Text (Rich Text Editor) Visual in Bold BI | Bold BI

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
NS
Written by Nabilla Salma Hassan
Updated:
Comments (0)
Access denied
Access denied