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

RadMaskedTextBox style match asp TextBox

9 Answers 61 Views
Input
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 08 Aug 2014, 09:24 PM
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?

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 11 Aug 2014, 05:32 AM
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.
0
James
Top achievements
Rank 1
answered on 11 Aug 2014, 02:46 PM
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.
0
Shinu
Top achievements
Rank 1
answered on 12 Aug 2014, 02:46 AM
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.
0
James
Top achievements
Rank 1
answered on 12 Aug 2014, 02:01 PM
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.


0
James
Top achievements
Rank 1
answered on 12 Aug 2014, 02:07 PM
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.
0
James
Top achievements
Rank 1
answered on 12 Aug 2014, 02:09 PM
Sorry I meant to paste this:

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
0
Accepted
Angel Petrov
Telerik team
answered on 15 Aug 2014, 08:54 AM
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.

 
0
James
Top achievements
Rank 1
answered on 10 Dec 2014, 08:03 PM
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?

0
James
Top achievements
Rank 1
answered on 10 Dec 2014, 08:10 PM
I found the problem.
Looks like "Label" is on the RadTextBox control.
http://www.telerik.com/help/aspnet-ajax/input-adding-labels.html
Tags
Input
Asked by
James
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
James
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or