RadzenHtmlEditor Underline Icon is missing #692

Closed
opened 2026-01-29 17:41:38 +00:00 by claunia · 2 comments
Owner

Originally created by @Diamond39 on GitHub (Jan 9, 2023).

Description of the bug
The material icon for "Underlined Text" button, has been changed from "underline_text" to "underlined_text".
Actually, RadzenHtmlEditor uses the "underline_text" (missing) instead of the new one.

To Reproduce

<RadzenHtmlEditor style="height: 800px">
	<RadzenHtmlEditorUndo Title="Annulla" />
	<RadzenHtmlEditorRedo Title="Ripeti" />
	<RadzenHtmlEditorSeparator />
	<RadzenHtmlEditorBold Title="Grassetto" />
	<RadzenHtmlEditorItalic Title="Corsivo" />
	<RadzenHtmlEditorUnderline Title="Sottolineato"/>
	<RadzenHtmlEditorStrikeThrough Title="Sbarrato" />
	<RadzenHtmlEditorSeparator />
	<RadzenHtmlEditorAlignLeft Title="Allinea a sinistra" />
	<RadzenHtmlEditorAlignCenter Title="Allinea al centro" />
	<RadzenHtmlEditorAlignRight Title="Allinea a destra" />
	<RadzenHtmlEditorJustify Title="Giustifica" />
	<RadzenHtmlEditorSeparator />
	<RadzenHtmlEditorIndent Title="Indenta" />
	<RadzenHtmlEditorOutdent Title="Non Indentare" />
	<RadzenHtmlEditorUnorderedList Title="Lista Non Ordinata" />
	<RadzenHtmlEditorOrderedList Title="Lista Ordinata" />
	<RadzenHtmlEditorSeparator />
	<RadzenHtmlEditorColor Title="Colore del Testo" />
	<RadzenHtmlEditorBackground Title="Colore dello Sfondo" />
	<RadzenHtmlEditorRemoveFormat Title="Cancella Formato" />
	<RadzenHtmlEditorSeparator />
	<RadzenHtmlEditorSubscript Title="Pedice" />
	<RadzenHtmlEditorSuperscript Title="Apice" />
	<RadzenHtmlEditorSeparator />
	<RadzenHtmlEditorLink Title="Link Ipertestuale" />
	<RadzenHtmlEditorUnlink Title="Rimuovi Link Ipertestuale" />
	<RadzenHtmlEditorFontName Placeholder="Formato Testo" Title="Formato Testo" />
	<RadzenHtmlEditorFontSize Title="Dimensione Testo" />
	<RadzenHtmlEditorFormatBlock Placeholder="Stile Testo" Title="Stile Testo" />
</RadzenHtmlEditor>

Expected behavior
This is how it should be:
image

Screenshots
image

Originally created by @Diamond39 on GitHub (Jan 9, 2023). **Description of the bug** The material icon for "Underlined Text" button, has been changed from "underline_text" to "underlined_text". Actually, RadzenHtmlEditor uses the "underline_text" (missing) instead of the new one. **To Reproduce** ``` <RadzenHtmlEditor style="height: 800px"> <RadzenHtmlEditorUndo Title="Annulla" /> <RadzenHtmlEditorRedo Title="Ripeti" /> <RadzenHtmlEditorSeparator /> <RadzenHtmlEditorBold Title="Grassetto" /> <RadzenHtmlEditorItalic Title="Corsivo" /> <RadzenHtmlEditorUnderline Title="Sottolineato"/> <RadzenHtmlEditorStrikeThrough Title="Sbarrato" /> <RadzenHtmlEditorSeparator /> <RadzenHtmlEditorAlignLeft Title="Allinea a sinistra" /> <RadzenHtmlEditorAlignCenter Title="Allinea al centro" /> <RadzenHtmlEditorAlignRight Title="Allinea a destra" /> <RadzenHtmlEditorJustify Title="Giustifica" /> <RadzenHtmlEditorSeparator /> <RadzenHtmlEditorIndent Title="Indenta" /> <RadzenHtmlEditorOutdent Title="Non Indentare" /> <RadzenHtmlEditorUnorderedList Title="Lista Non Ordinata" /> <RadzenHtmlEditorOrderedList Title="Lista Ordinata" /> <RadzenHtmlEditorSeparator /> <RadzenHtmlEditorColor Title="Colore del Testo" /> <RadzenHtmlEditorBackground Title="Colore dello Sfondo" /> <RadzenHtmlEditorRemoveFormat Title="Cancella Formato" /> <RadzenHtmlEditorSeparator /> <RadzenHtmlEditorSubscript Title="Pedice" /> <RadzenHtmlEditorSuperscript Title="Apice" /> <RadzenHtmlEditorSeparator /> <RadzenHtmlEditorLink Title="Link Ipertestuale" /> <RadzenHtmlEditorUnlink Title="Rimuovi Link Ipertestuale" /> <RadzenHtmlEditorFontName Placeholder="Formato Testo" Title="Formato Testo" /> <RadzenHtmlEditorFontSize Title="Dimensione Testo" /> <RadzenHtmlEditorFormatBlock Placeholder="Stile Testo" Title="Stile Testo" /> </RadzenHtmlEditor> ``` **Expected behavior** This is how it should be: ![image](https://user-images.githubusercontent.com/33099316/211343316-1ffc2633-a8d9-4c1f-ab28-d514b8305fd2.png) **Screenshots** ![image](https://user-images.githubusercontent.com/33099316/211342986-334a6206-96cc-4113-b670-0f9d851e30ff.png)
Author
Owner

@yordanov commented on GitHub (Jan 9, 2023):

Hey @Diamond39, we cannot reproduce the issue at https://blazor.radzen.com/html-editor. Both format_underline and format_underlined ligatures are defined and refer to the same icon within the Material Icons font. Not sure where you saw "underline_text" - there is no such ligature at all in Radzen.Blazor or any Material Icons font.

Make sure that:

  1. You are loading the latest Material Icons font
  2. There is no any custom CSS containing the text-transform: uppercase rule that might be overriding the icon styles. Looking at the screenshot there seems to be such a rule, since all the letters are uppercase.
@yordanov commented on GitHub (Jan 9, 2023): Hey @Diamond39, we cannot reproduce the issue at [https://blazor.radzen.com/html-editor](https://blazor.radzen.com/html-editor). Both `format_underline` and `format_underlined` ligatures are defined and refer to the same icon within the Material Icons font. Not sure where you saw "underline_text" - there is no such ligature at all in Radzen.Blazor or any Material Icons font. Make sure that: 1. You are loading the latest Material Icons font 2. There is no any custom CSS containing the `text-transform: uppercase` rule that might be overriding the icon styles. Looking at the screenshot there seems to be such a rule, since all the letters are uppercase.
Author
Owner

@Diamond39 commented on GitHub (Jan 9, 2023):

Hey @Diamond39, we cannot reproduce the issue at https://blazor.radzen.com/html-editor. Both format_underline and format_underlined ligatures are defined and refer to the same icon within the Material Icons font. Not sure where you saw "underline_text" - there is no such ligature at all in Radzen.Blazor or any Material Icons font.

Make sure that:

  1. You are loading the latest Material Icons font
  2. There is no any custom CSS containing the text-transform: uppercase rule that might be overriding the icon styles. Looking at the screenshot there seems to be such a rule, since all the letters are uppercase.

Sorry, wrong copy and paste, the issue is about the "format_underline" and format_underlined. I just solver by changing specific button with the corrispondent button and icon:

<button tabindex="-1" class="rz-html-editor-button" title="Sottolineato">
		<!--!-->
		<i class="rzi">format_underlined</i><!--!-->
	</button>

Thanks you anyway. I found this issue just today, It always worked. I'm just using the workaround as said before.

Bye!

@Diamond39 commented on GitHub (Jan 9, 2023): > Hey @Diamond39, we cannot reproduce the issue at https://blazor.radzen.com/html-editor. Both `format_underline` and `format_underlined` ligatures are defined and refer to the same icon within the Material Icons font. Not sure where you saw "underline_text" - there is no such ligature at all in Radzen.Blazor or any Material Icons font. > > Make sure that: > > 1. You are loading the latest Material Icons font > 2. There is no any custom CSS containing the `text-transform: uppercase` rule that might be overriding the icon styles. Looking at the screenshot there seems to be such a rule, since all the letters are uppercase. Sorry, wrong copy and paste, the issue is about the "format_underline" and format_underlined. I just solver by changing specific button with the corrispondent button and icon: ``` <button tabindex="-1" class="rz-html-editor-button" title="Sottolineato"> <!--!--> <i class="rzi">format_underlined</i><!--!--> </button> ``` Thanks you anyway. I found this issue just today, It always worked. I'm just using the workaround as said before. Bye!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#692