OrderedList, UnorderedList and NumberedList toolbar items are not working.

[Vinay Adiga]

Hi, We are using syncfusion richtextbox editor with custom theme downloaded from theme studio. we are using v26 of syncfusion. The OrderedList, UnorderedList and NumberedList toolbar items are not working. Other controls are working fine. I am attaching the code images here.

Attachment: Syncfusionforum_6fe642af.zip

[Selvakumar Subramani]

Hi Vinay Adiga,

We have reviewed the details you provided and suspect that the issue may be caused by a style override for the list element. We attempted to replicate the problem using a sample based on your code snippet, but we were unable to do so.

To assist us in further investigating this issue, could you please provide the following additional details?

1. From your screenshots, we noticed that the list icon appears active, but the list style is not applied to the content. Please verify if the list style is set to list-style-type: nonein your application end.
2. Let us know if you are able to reproduce the issue using the sample we provided.
3. If possible, please share a video demonstration of the issue.

These details will greatly help us in identifying and resolving the problem.

Thank you.

Regards

Selvakumar s

[Vinay Adiga]

we are using custom tailwindcss. I have attached the same. I am not aware of list-style-type. Please explain further.

Attachment: tailwind.min_6fad0405.zip

[Selvakumar Subramani]

Hi Vinay Adiga,

We have created a sample using the custom CSS you provided, but after analyzing it, we were unable to replicate the issue you're experiencing. To assist you more effectively, please provide additional details so we can better understand and resolve the problem quickly.

Could you please confirm the following?

1. Are there any configurations that we might have missed in the sample we provided?
2. Were you able to replicate the issue using our shared sample?
3. If possible, could you share a video illustration of the issue?

Your feedback will help us identify the root cause and offer a solution promptly.

Sample: https://stackblitz.com/edit/react-sbghn3-x8aepc?file=index.html,index.css

[Vinay Adiga]

I have attached a recording of the screen in which the code is not working. Please take a look. I have opened the dev-tools as well.

Attachment: 20240903_211514_1d4e2aa3.zip

[Vinothkumar Yuvaraj]

Hi Vinay Adiga,

Thank you for sharing the video. After reviewing it, we found that the issue arises because the list-style is set to none and the padding is set to 0 for the ul and ol elements in the editor. These styles are overriding the default Rich Text Editor component styles.

To fix this, please add the following CSS to your application:

 <style>    
          .e-richtexteditor .e-rte-container .e-content ol {
                padding-inline-start : 40px;
                list-style: auto;
            }
            .e-richtexteditor .e-rte-container .e-content ul{
                list-style-type : disc;
                padding-inline-start : 40px;
            }
    </style>

 Copy

For a working example, you can refer to this sample: StackBlitz Example.

[Vinay Adiga]

Yep. Now its working. Thank you.

[Vinothkumar Yuvaraj]

Hi Vinay Adiga,

We are glad your problem has been solved. Please get back to us if you have any further queries.