RadMaskedTextBox style match asp TextBox

[James]

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?

[Shinu]

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.

[James]

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.

[Shinu]

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.

[James]

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.

[James]

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.

[James]

Sorry I meant to paste this:

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

[Angel Petrov]

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

 

 

[James]

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?

[James]

I found the problem.
Looks like "Label" is on the RadTextBox control.
http://www.telerik.com/help/aspnet-ajax/input-adding-labels.html