Bullet Points Indent

Need help Plugins
2

Hello there,

If you’re using Bubble’s official Rich Text Editor and struggling with indents and bullet styles, there’s a workaround to customize the bullet point list structure beautifully.

You can add an HTML element to your page where the Rich Text Editor is located and insert the following code. This allows you to control the indentation, bullet styles, and overall appearance of your fixed text.

Be sure to assign an Element ID to your Rich Text Editor. In the example below, the ID is set as richtext-editor. You can adjust the padding, font sizes, and bullet icons (●, ○, ■) as you like.

<html>
<body>
<style>
/* Customize 1st Level Bullet Points */
#richtext-editor .ql-editor li:not([class*="ql-indent-"])::before {
    content: "●"; /* Icon for 1st level */
    font-size: 16px !important; /* Size of bullet */
    margin-right: 8px !important; /* Space between bullet and text */
    color: black !important; /* Bullet color */
}

/* Customize 2nd Level Bullet Points */
#richtext-editor .ql-editor li.ql-indent-1 {
    padding-left: 4.5em; /* Indent for 2nd level */
    font-size: 17px; /* Font size for 2nd level */
}
#richtext-editor .ql-editor li.ql-indent-1::before {
    content: "○"; /* Icon for 2nd level */
    font-size: 16px !important;
    margin-right: 8px !important;
    color: black !important;
}

/* Customize 3rd Level Bullet Points */
#richtext-editor .ql-editor li.ql-indent-2 {
    padding-left: 7.5em; /* Indent for 3rd level */
}
#richtext-editor .ql-editor li.ql-indent-2::before {
    content: "■"; /* Icon for 3rd level */
    font-size: 16px !important;
    margin-right: 8px !important;
    color: black !important;
}

/* Optional 4th Level Customization */
#richtext-editor .ql-editor li.ql-indent-3::before {
    content: "□"; /* Icon for deeper levels */
    font-size: 16px !important;
    margin-right: 8px !important;
    color: black !important;
}
</style>
</body>
</html>

How to Apply:

  1. Add an HTML Element: Place it on the page where your Rich Text Editor is located and paste the code above into it.
  2. Assign the Element ID: Go to your Rich Text Editor settings and assign the Element ID as richtext-editor (or match it with your custom ID).
  3. Preview the Effect: Now your bullet points should reflect the customized styles and structure.

Let me know if this works for you! :blush:
Best,

IFINITY - if to infinite
Your outsourced development partner—from project inception to maintenance and expansion.

No-Code Bubble.io Specialist Agency
We develop apps, websites, software, and plugins.

Feel free to reach out.
:email: Contact: support@if-inity.io
:globe_with_meridians: Website: if-inity.io
:speech_balloon: KakaoTalk inquiries: Join our Chat

1 Like