CssClass is not applied to RadMaskedTextBox

[Meenakshi Nagalingam]

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.

 

 

 

 

 

[Princy]

Hello,

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

CSS:

...
   font-family: Arial !important;
   font-weight: normal !important;
...

Regards,
Princy.

[Meenakshi Nagalingam]

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="[phone]" 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="[phone]" 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="[phone]" 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 .

[Dimo]

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.