We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can not visible icons & outlines

Hi all,

I followed RicjTextEditor creation from the documentation. But I couldn't create the UI component, It's not loading icons & outlines. I think the problem in the css. But I followed the documentation well.


* Put css content in "myForm.component.css"
* Add relevant imports to app.module.ts & myForm.component.ts

.e-code-mirror::before {
content: '\e345';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
display: none;
}

#special_char,
.char_block {
display: inline-block;
}
.char_block.e-active {
/* box-shadow: inset 3px 3px 7px 0px; */
outline: 1.5px solid;
}

.char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;
}

#custom_tbar,
#custom_tbar div{
cursor: pointer;
}


#rteSection {
height: 500px;
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
content: "\e76e";
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
content: "\e726";
}

.e-richtexteditor textarea.e-content {
float: left;
}
.e-richtexteditor .e-rte-content {
overflow: hidden;
}
.e-rte-content .e-content.e-pre-source{
width: 100%;
}

.property-panel-content td{
width: 50%;
}
.property-panel-content td div {
padding-left: 10px;
padding-top: 10px;
}

.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';
}

.e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
content: '\e350';
}
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}

#rteDialog.e-dialog .e-dlg-content {
padding: 0px 0px 5px 16px;
}
#custom_tbar .e-tbar-btn-text {
font-size: 16px;
}
.e-bigger #custom_tbar .e-tbar-btn-text {
font-size: 18px;
}

@media (min-width: 320px) and (max-width: 480px) {
.fabric.e-bigger #rteDialog {
min-width: 281px;
}

.fabric #rteDialog {
min-width: 241px;
}

.bootstrap.e-bigger #rteDialog,
.bootstrap #rteDialog {
min-width: 223px;
}

.highcontrast.e-bigger #rteDialog {
min-width: 283px;
}
.highcontrast #rteDialog {
min-width: 243px;
}
.material #rteDialog {
min-width: 224px;
}
.material.e-bigger #rteDialog {
min-width: 236px;
}
}


* Screenshot

https://i.imgur.com/sJQP9Ai.jpg








1 Reply

PO Prince Oliver Syncfusion Team June 7, 2019 10:12 AM UTC

Hello Isanka, 

Greetings from Syncfusion support. 

Based on the shared information, we suspect that the issue might have occurred due to missing CSS files required to render the control. We suggest you to check our getting started and adding CSS reference sections. 


You can also resolve the issue by adding the reference to the online CDN link for the styles. 

[Index.html] 
<link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 

We have attached a sample for undo redo manager for your reference, please find it in the following location:  

Let us know if you need any further assistance on this. 

Regards, 
Prince 


Loader.
Up arrow icon