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

CssClass is not applied to RadMaskedTextBox

3 Answers 102 Views
Input
This is a migrated thread and some comments may be shown as answers.
Meenakshi Nagalingam
Top achievements
Rank 1
Meenakshi Nagalingam asked on 20 May 2010, 01:20 PM

Hi,

i am using RadMaskedTextBox (Telerik Version Q2 2009). I want to apply custom CssClass for it.

<telerik:RadMaskedTextBox ID="lblPhone" runat="server" CssClass="field_data_element" Mask="(###) ###-####" ReadOnly="true" TextWithLiterals="--" Width="100px"></telerik:RadMaskedTextBox>

My Css class goes like this,
.field_data_element 
{
font-family: Arial
font-weight: normal;
font-size: 12px;
color:#000000
background-color: #FEF4DE;
border: solid 1px #FEF4DE;
padding: 2px 2px 1px 2px;
white-space: nowrap
}

The css class properties are not getting reflected in RadMaskedTextBox. Can anyone know how to apply custom styles for RadMaskedTextBox please share with me.

Thanks.

 

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 20 May 2010, 01:29 PM
Hello,

Add the !important modifier to stye in order to override the default style.

CSS:
 
...  
   font-familyArial !important;  
   font-weightnormal !important;  
... 

Regards,
Princy.
0
Meenakshi Nagalingam
Top achievements
Rank 1
answered on 20 May 2010, 02:06 PM
Hi,

Thanks for the quick response. I tried with adding !important to style but its not working.

The html source generated for this is,

<span id="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone_wrapper" class="RadInput RadInput_Default" style="white-space:nowrap;"><input type="text" size="20" value="(237) 823-8239" id="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone_text" name="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone_text" class="riTextBox riRead field_data_element" readonly="readonly" style="width:100px;" /><input style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone" value="(237) 823-8239" class="rdfd_" type="text" /><input style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone_Value" name="ctl00$DefaultContent$ucPatientSummaryDetails$lblPhone" class="rdfd_" value="(237) 823-8239" type="text" /><input id="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone_ClientState" name="ctl00_DefaultContent_ucPatientSummaryDetails_lblPhone_ClientState" type="hidden" /></span>


The class property is generated  as class="riTextBox riRead field_data_element" in HTML. It prefixes "riTextBox riRead" to the specified class name .
0
Dimo
Telerik team
answered on 20 May 2010, 02:46 PM
Hi Meenakshi,

The riRead and riTextBox classes should be there and there is no need for you to remove them.

The following CSS rule should work:

.field_data_element
{
font-family: Arial !important;  
font-weight: normal !important;
font-size: 12px !important;
color:#000000 !important;
background-color: #FEF4DE  !important;
border: solid 1px #FEF4DE  !important;
padding: 2px 2px 1px 2px  !important;
white-space: nowrap;
}

Sincerely yours,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Input
Asked by
Meenakshi Nagalingam
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Meenakshi Nagalingam
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or