Style the Rad Spell Dialog

[michael]

Dear Support,

I am using the RadSpell control and linking it to a RadTextbox. That part works great.

<telerik:RadSpell RenderMode="Lightweight" Skin="Metro" ID="RadSpell1" runat="server" ButtonType="ImageButton" ControlToCheck="txtDescription" SpellCheckProvider="PhoneticProvider" SupportedLanguages="en-US,English" OnClientDialogClosed="SpellCheckDone" />

However, the font size and font name (Times Roman) in the popup dialog do not match the rest of my screen. I've tried setting the CssClass for the control, the font name and font size properties, and everything else I can think of but with no success. Can you provide a CSS example (or other mechanism) by which I can set the font and font size of the labels and buttons within the dialog. I attached a screenshot with arrows pointing to the text components I am referring to.

Thanks,

Mike

[Marin Bratanov]

Hi Mike,

RadSpell uses the same font-family as the rest of our controls, and it starts with "Segoe UI". If this is not the case for you, can you confirm that all network requests return successfully and that your machine has the Segoe UI font? It comes with Windows by default and is in C:\Windows\Fonts.

That aside, you can define a custom stylesheet to be loaded in the dialog via the DialogsCssFile property. In it, you can define custom rules. For example:

body,
body * {
    font-family: "Courier New" !important;
    font-size: 8px !important;
}

<telerik:RadSpell RenderMode="Lightweight" Skin="Metro" ID="RadSpell1" runat="server" ButtonType="ImageButton" ControlToCheck="txtDescription" SpellCheckProvider="PhoneticProvider" SupportedLanguages="en-US,English" OnClientDialogClosed="SpellCheckDone" DialogsCssFile="StyleSheet.css" />
<asp:TextBox ID="txtDescription" runat="server" />
<script>
    function SpellCheckDone() {

    }
</script>

 

You can make the selectors more specific by inspecting the rendered HTML via the browser dev toolbar and choosing the elements you want to style.

Regards,

Marin Bratanov
Telerik by Progress

[michael]

That worked great. Thank you. I hadn't noticed the DialogsCssFile property.