Reduce Margins for Rich Text Editor

[Craig Mynatt]

Hello,

1. How can I reduce or eliminate the margins for the rich text editor?

2. How can I eliminate the tool bar?

-- I will be programmatically formatting the text as users enter their values. I don't want them to be able to format it.

[Vinothkumar Yuvaraj]

Hi Craig Mynatt,

Query 1 : “How can I reduce or eliminate the margins for the rich text editor?”

To remove the padding in the Rich Text Editor content, you can use the following style. Please refer to the code and sample attached for your reference.

<style>

    .e-richtexteditor .e-rte-content .e-content {

padding: 0px;

    }

</style>

Query 2 : “How can I eliminate the tool bar?”

To disable the toolbar, you can set "Enable" to false in the "RichTextEditorToolbarSettings" property of the Rich Text Editor. Please refer to the following code.

<SfRichTextEditor>

    <RichTextEditorToolbarSettings Enable = "false" />

</SfRichTextEditor>

 

API Link : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Enable

Regards,

Vinothkumar

Attachment: BlazorApp1_4b2e2958_e2515f8e.zip

[Craig Mynatt]

I really appreciate your quick reply.

The toolbar is eliminated now, but the padding: 0px is not being obeyed?

I'm using the RichTextEditor in a ValueTemplate for the QueryBuilder control, if that has any affect?

Here's my Style:

<style>
    .e-query-builder .e-rule-container .e-rule-field {
        display: flex !important;
    }

    .e-query-builder .e-rule-container .e-rule-value {
        flex: 10rem 4;
    }

    .e-query-builder .e-rule-container .e-rule-value-delete .e-rule-delete {
        margin-top: 11px !important;
    }

    .e-richtexteditor .e-rte-content .e-content {
        padding: 0px;
    }
</style>

Here's the Image:

[Gokulraj Devarajan]

Hi Craig,

We have validated your query on ”Padding 0px style not functioning properly on the RichTextEditor rendered within the Query Builder Value template”. We have found that the issue is not reproduced with the sample we created. Please refer to the code snippet and sample for your reference.

Index.razor

` ` `

    .e-richtexteditor .e-rte-content .e-content {

        padding: 0px !important;

    }

` ` `

Sample : https://www.syncfusion.com/downloads/support/forum/183260/ze/RTE_Inside_Query_Builder_Template_8318d5f8

In the meantime, can you try using the "important" keyword in the style to see if it resolves the issue?

If the issue persists Can you please share the following details,

1. Can you please modify the shared sample with the issue replicating code?
2. Can you please share the issue replicating the code block?
3. If possible, can you please share the issue reproducible sample?

The above details will be helpful for us to validate and reproduce the issue on our end and assist you at the earliest.

Regards

Gokulraj Devarajan

[Craig Mynatt]

Thank you!

[Gokulraj Devarajan]

Hi Craig,

You're welcome! Please get back to us if you need any other assistance.

Regards

Gokulraj Devarajan