Styling the new Horizontal Rule in the Rich Text Editor

[Grant Symon]

Hi,

I’ve applied version ej2/30.1.37 to my app and am pleased to see that it includes a Horizontal Rule.

Gokulraj Devarajan very kindly provided me with some code to run an HR, back in Oct ’24… so I’ve now removed his code so that the new HR works as intended.

I was styling my previous HR with CSS … however, I can’t get it working properly on the new version of the HR. I can’t change the ​height or the margins (or otherwise centre the new HR) or change the colour.

Please could you tell me how to achieve this styling with the new HR?

Below is the css styling I was using.

hr {
border: none;
height: 0.1em;
background-color: #992F00;
margin: 2em 25% 2em 25%;
width: 50%;
opacity: 0.3;
/* border-radius: 0.5em;
}


[Bhuvaneshwari Thirunavukarasu]

Hi Grant Symon,

Thank you for reaching out to us!

We’re glad to hear that you’ve updated to version 30.1.37 and are making use of the new Horizontal Rule feature in the Rich Text Editor.

To customize the appearance of the new <hr> element, you’ll need to override the default styles applied by the editor. You can achieve this by using the !important declaration in your CSS to ensure your styles take precedence. Here's an updated version of your CSS:

hr {

    border: none !important;

    height: 0.1em !important;

    background-color: #992F00 !important;

    margin: 2em 25% 2em 25% !important;

    width: 50% !important;

    opacity: 0.3 !important;

}

For your convenience, we’ve also attached a sample and a screenshot demonstrating the applied styles in action.

Sample Link: https://stackblitz.com/edit/6ukm5zad?file=index.ts,index.html

Please let us know if you need any further assistance, we’re happy to help!

Best regards,
Bhuvaneshwari T

[Grant Symon]

Thank you Bhuvaneshwari!  It works just as before. 😊

(i notice in the StackBlitz code, you don't need to put !important after each line.  Only border and margin.  What is the reason for this?)

[Bhuvaneshwari Thirunavukarasu]

Hi Grant,

Thank you for your kind words — we’re really glad to hear everything is working fine!

You’re absolutely right. In our testing, only the border and margin styles were being overridden by the Rich Text Editor’s default styles, which is why they required the !important declaration. The other styles like height, background-color, and opacity were applied correctly without it.

If you have any further questions or need assistance with anything else, feel free to reach out.

Best regards,
Bhuvaneshwari T

[Grant Symon]

Good to know.  Thanks again Bhuvaneshwari. 👍

[Archana Jayakumar]

Hi Grant,

We’re really glad to hear everything is working fine! Please get back to us if you need any further assistance.

Regards,

Archana