Indentation and bullet points not working in HTML Editor

Radzen.Blazor Components
1

Radzen HTML Editor

  • I am currently attempting to use the HTML Editor with the following stylesheet:
    <link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet">

  • I am finding that the bullet points and numbered lists in the written html are being interfered with by the stylesheet provided by MudBlazor <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> so that the indentation is incorrect, or the bullet point simply doesn't appear.

  • Is there a way to ensure that the Radzen HTML Editor is not interfered with by other style sheets?

Code

Index.html <head>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Writers Friend Web App</title>
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />

    <!-- Text Editor -->
    <link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet">

</head>

Html Editor Component


<RadzenHtmlEditor 
    @bind-Value="@Text" 
    Change="HandleChange" 
    Style="min-height: 300px; margin: 1rem;"/>

@code 
{
    [Parameter]
    public Action<string> OnTextChange { get; set; }

    [Parameter]
    public string Text { get;set; }

    void HandleChange(string text)
    {
        OnTextChange?.Invoke(text);
    }
}
2

Hi @Jeremy_May,

Indeed the HTML editor inherits all CSS rules that apply to your document. Here is a thread that shows how to specify custom CSS just for the content:

For example:

.rz-html-editor-content ul li {
    /* custom bullet list styling */
}

.rz-html-editor-content ol li {
   /* custom numbered list styling */
}
3

That has worked nicely!

Thank you very much for your help!

4

Hi there,

I'm hitting exactly the same issue as reported in this thread, but whatever I do I can't get bullets to display. Can one of you elaborate with a more detailed explanation of the fix? i.e., do I actually need anything in the /* custom bullet list styling */ part?

Also, I've noticed that the .rz-html-editor-content class isn't picked up if I use a razor.css file for my component - it only seems to kick in if I put it in the main app's CSS file. Any hints on how to workaround that? I'd really like to isolate this....

Thanks for any assistance you can give.

5

Bullet lists work by default. You probably have some other CSS which globally overrides their styling. Use your browser's developer tools to find what that is.

image
image1920×989 135 KB

This is because of Blazor CSS isolation - this article shows how to use ::deep to circumvent it

.

1 Like
6

Thanks for the quick response.

I've spent about 2 hours trying to solve this, but to no avail. As you say, it's MudBlazor subverting the Radzen styles, but I can't find a way to prevent it. Hoping that @Jeremy_May might be able to give some tips on how he worked around it, but in the meantime I'll have to give up. :frowning:

Thanks anyway!

7

You can use the Browser's developer tools - check the styles that apply to the <li> elements by right-clicking them and using "Inspect". The CSS rules will appear and you can toggle them one by one to see what the offender is.

8

Thanks, I've tried that - and untoggling the padding on the MudBlazor style seems to fix it. However, when I explicitly override the padding on the replacement style (either by setting it explicitly or using initial or revert it doesn't work. I think my CSS knowledge is lacking here.

But I've also noticed another problem - which is that the HTML becomes really messy, really quickly. If I toggle bullets in the editor on your demo page, I get a mess of HTML which is completely unusable.

<ul><li>Test</li><li>Another test</li></ul><span style="background-color: var(--rz-editor-content-background-color); color: var(--rz-text-color); font-family: var(--rz-text-font-family); font-size: var(--rz-body-font-size); font-weight: var(--bs-body-font-weight); text-align: var(--bs-body-text-align);">Some text</span><br>

I think you must be using the styles of the page itself to build/edit the html, so there's no isolation - I wouldn't expect to see the rz-editor-content variables in the HTML I export from this control. This means the control isn't practical or useful in a production environment, unfortunately, So I'll have to look elsewhere.

Thanks again though!

9

I can't seem to reproduce such a problem on our online demo. What should I do to get this markup?
test

RadzenHtmlEditor uses the built-in browser HTML editing capabilities in order to avoid rolling out a full-blown JS implementation. The actual implementation relies entirely on the browser API.

1 Like
10

Understood. It makes sense as an approach to build a simple editor, but it means the rest of the page styles leech into the content, which is why the initial issue occurs in the first place.

To repro the problem I just did the following:

  1. Clear any existing html
  2. Add some bullets
  3. On the last bullet, repeatedly toggle the bullet off / on several times
  4. Then view the html generated.

Here's a video of it in action:

radzen

11

Reproduced the inline styles and will see if they can be somehow not generated. Appears to happen when a bullet is removed.

Some people require that as they need the content to look exactly as the final product in the page. Probably some sort of CSS reset applied to rz-editor-content would fix that.

1 Like
12

Yeah, I tried a whole bunch of things, including rz-html-editor-content * { all: revert } and various stuff like that, but still found Mud and Radzen styles in the generated HTML. As you say, it's probably fine for some people - depends what they're trying to do, but it won't work for us, sadly. :slight_smile:

Thanks for the input though, and I'll keep an eye out!

13

Had the same problem it's because of styles from MudBlazor setting the padding for ul and ol as 0px and list-style-type as none.
To get around it I overrode those styles as below and got it to behave as I wanted. Hope this helps someone.

<style>
    .rz-html-editor-content ul {
        padding-left: 20px;
    }
    .rz-html-editor-content ol {
        padding-left: 20px;
    }
    .rz-html-editor-content ul li {
        padding-left: 5px;
        list-style-type: circle;
    }
    .rz-html-editor-content ol li {
        padding-left: 5px;
        list-style-type: decimal;
    }
</style>