This is a migrated thread and some comments may be shown as answers.

Style the Rad Spell Dialog

2 Answers 12 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
michael
Top achievements
Rank 1
michael asked on 09 Feb 2017, 09:36 PM

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

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 10 Feb 2017, 11:01 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
michael
Top achievements
Rank 1
answered on 10 Feb 2017, 11:39 AM
That worked great. Thank you. I hadn't noticed the DialogsCssFile property.
Tags
General Discussions
Asked by
michael
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
michael
Top achievements
Rank 1
Share this question
or