RadMaskedTextBox style match asp TextBox

10 posts, 1 answers
  1. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 08 Aug 2014 Link to this post

    I dropped a RadMaskedTextBox on a asp.net form that already had several asp.net textbox controls but the border / shadow and font of the RadMaskedTextBox does not match the current asp.net TextBox controls.
    I have not styles applied to the page.

    How to I get the 2 input boxes to match without setting up a bunch of css for the page?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Aug 2014 in reply to James Link to this post

    Hi James,

    Please try the below sample code snippet to achieve your scenario.

    ASPX:
    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Mask="(##)-(##)"
        CssClass="text-style" HoveredStyle-BorderColor="#8e8e8e">
    </telerik:RadMaskedTextBox>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="text-style">
    </asp:TextBox>

    CSS:
    .text-style
    {
        font-family: Calibri !important;
        font-size: 12px !important;
        font-style: normal !important;
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 11 Aug 2014 in reply to Shinu Link to this post

    Thanks but that did not help.
    The radmasked text box has a light blue border and the text inside the box is wider than the text inside the default microsoft text box.
    I have attached a picture to show the problem.

    I want the radmasked text box to look like the microsoft text box. We did not apply any theme or style to the default microsoft text box.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Aug 2014 in reply to James Link to this post

    Hi James,

    Unfortunately I couldn't replicate the issue at my end. Try to attach the 'text-style' CssClass for both TextBox and MaskedTextBox and also set the Border-color for the RadMaskedTextBox as follows. Please take look into the attached screenshots. Try to replicate the issue in and sample code and let me know.

    ASPX:
    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Mask="(##)-(##)" CssClass="text-style" HoveredStyle-BorderColor="#8e8e8e" EmptyMessageStyle-BorderColor="#8e8e8e" EnabledStyle-BorderColor="#8e8e8e" FocusedStyle-BorderColor="#8e8e8e">
    </telerik:RadMaskedTextBox>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="text-style">
    </asp:TextBox>

    CSS:
    .text-style
    {
        font-family: Calibri !important;
        font-size: 12px !important;
        font-style: normal !important;
    }

    Thanks,
    Shinu.
  6. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 12 Aug 2014 in reply to Shinu Link to this post

    Shinu,
    I tried your suggestion for setting the style of the "RadMaskedTextBox" and it still did not match the "MicrosoftTextBox".
    I do not want to alter the style of the "MicrosoftTextBox".

    I need the "RadMaskedTextBox" style to match the "default" style that is on the "MicrosoftTextBox".
    It looks like the RadMaskedTextBox has class="riTextBox riEnable".
    These seem to be inside the "Telerik.Web.UI.WebResource.axd".
    The "riTextBox" has "font" 12px arial"
    I need to somehow remove the "riTextBox" class from the "RadMaskedTextBox"

    I would have thought that base controls styles such as the RadMaskedTextBox would have matched closer to their derived controls style.
    Is there a "flag / switch / or setting" I can change to make the RadMaskedTextBox control style match the MicrosoftTextBox control style?

    See attached for example.


  7. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 12 Aug 2014 Link to this post

    I do have a "work around" but I would rather not use it.

    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" CdnSettings-TelerikCdn="Enabled" />

    This makes both the text boxes look very similar. The border colors don't match.
    Also, the end users don't seem to like that the entire page looks very different.
  8. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 12 Aug 2014 in reply to James Link to this post

    Sorry I meant to paste this:

    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
  9. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 15 Aug 2014 Link to this post

    Hi James,

    You can try disabling our the built-in stlyes by setting the EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet properties to false. Please try modifying the RadMaskedTextBox definition as demonstrated below and test whether this approach fits the requirements.

    ASPX:
    <telerik:RadMaskedTextBox runat="server" Mask="#####" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"></telerik:RadMaskedTextBox>


    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 10 Dec 2014 Link to this post

    This ASP textbox does not seem to be the only control that does not match the Telerik control style, font, alignment, etc..
    I drop a ASP label "couldn't find a Telerik label" beside the RadTextBox and set the label AssociatedControlID = "RadTextBoxControl" and the two do not have the same style, font, text size, alignment, etc...
    I feel like I am doing something wrong.
    If I use EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" then all works fine.
    So is there anyway to get labels to match the RadTextBox style?
    Am I doing something wrong? Do I need to "hard code" all labels with the same style as the RadTextBox and if so, what is the default style name for the RadTextBox so I can add it to the label?

  11. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 10 Dec 2014 in reply to James Link to this post

    I found the problem.
    Looks like "Label" is on the RadTextBox control.
    http://www.telerik.com/help/aspnet-ajax/input-adding-labels.html
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017