Style the Rad Spell Dialog

3 posts, 0 answers
  1. michael
    michael avatar
    7 posts
    Member since:
    Apr 2016

    Posted 09 Feb Link to this post

    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. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3809 posts

    Posted 10 Feb Link to this post

    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.
  3. michael
    michael avatar
    7 posts
    Member since:
    Apr 2016

    Posted 10 Feb Link to this post

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