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

Can't assign custom CSS to RadTextBox

4 Answers 411 Views
Input
This is a migrated thread and some comments may be shown as answers.
John Fair
Top achievements
Rank 1
John Fair asked on 18 Feb 2010, 01:57 PM
I have what seems like a simple problem, but I can't get it to work.  I am simply trying to assign a custom CSS class to a RadTextBox via the attribute: CssClass="checkoutRequiredInput".

<telerik:RadTextBox ID="txtName" runat="server" Width="175px" CssClass="checkoutRequiredInput" />

What's happening though, is the Telerik generated CSS file (WebResource.axd...) is being attached to the page AFTER my custom CSS file.  So the page is rendering my CSS, then the Telerik CSS which is overriding my style.  I'm not sure if this is the result of using a MasterPage, but I have tried moving my CSS file's declaration around (in the page, in the MasterPage, etc) without success.

WebResource.axd...2925083 (line 39) 
html body .RadInput_Default .riTextBox, html body .RadInputMgr_Default  { 
background:none repeat scroll 0 0 #FFFFFF
border-color:#8E8E8E #B8B8B8 #B8B8B8 #8E8E8E
border-style:solid
border-width:1px
color:#000000
font:12px "segoe ui",arial,sans-serif
padding:2px 1px 3px
.checkoutRequiredInput { 
background:none repeat scroll 0 0 Red; 
margin:1px 0; 
width:175px

The above code is FireBug's output of the CSS, meaning the Top style takes precedence over the lower style.  As a result I cannot change the background color of the text box (I don't really want Red, but that would stand out if it worked).

Help?

EDIT:  Some additional details I assume you'll ask for.

1) The Default CSS file for a RadTextBox is loading (and I'm not sure why?  Is it automatic?)
<link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=6ddCgTwcPGvcxML-k0DaXaNEwHkJQpsgRAzQRolF4UiV223Ken5HxvNrMIg0hxBY6YouB_BWaesPTT9LEBov1w2&amp;t=634009647102925083">
This is how the CSS file starts out--> /*Telerik RadInput Default Skin*/

2) When I investigate the source for this Demo: http://demos.telerik.com/aspnet-ajax/input/examples/appearance/styles/defaultcs.aspx
That CSS file (from #1 above) isn't being loaded.  This allows your custom CSS to be evaluated successfully. 

What causes the default CSS file to be loaded?  I have stripped the Skin Attribute from all of my RadTextBox controls for this page (however some still exist elsewhere in this site, which might cause the default to load due to the MasterPage?) and yet the default is still loaded.


4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 18 Feb 2010, 02:29 PM
Hello John,

The solution to your problem lies in understanding the concept of CSS specificity:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

The specificity of the RadInput styles are 22. The specificity of your custom CSS rule is 10. Please increase it, e.g. to 23:

html body form .RadInput .checkoutRequiredInput
{
     ........
}


Regards,
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.
0
John Fair
Top achievements
Rank 1
answered on 18 Feb 2010, 02:43 PM
Thanks Dimo, I knew it was something simple, but it was escaping me.  :)  Much appreciated.
0
Bosko Maksimovic
Top achievements
Rank 1
answered on 23 Mar 2010, 04:49 PM
My Css is being overrode and i can't get more specificity because the .axd one is so high!
(why does it have html and body?! its making it to high a specificity)

is there a way of getting the .axd file to insert custom css after all the other stuff?

HTML BODY input.HasToolTip  
{  
    background: #fff !important;  
    background-image: url('images/16-comment-square-question.png') !important;  
    background-repeat: no-repeat !important;  
    background-position: right !important;  
0
Dimo
Telerik team
answered on 23 Mar 2010, 05:32 PM
Hello Bosko,

The specificity of RadInput styles is 22, so that they are not accidentally overridden by web application styles. In your case, please use

HTML BODY input.HasToolTip ,
HTML BODY .RadInput  input.HasToolTip  

{  
    background: #fff !important;  
    background-image: url('images/16-comment-square-question.png') !important;  
    background-repeat: no-repeat !important;  
    background-position: right !important;  
}

Kind regards,
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
John Fair
Top achievements
Rank 1
Answers by
Dimo
Telerik team
John Fair
Top achievements
Rank 1
Bosko Maksimovic
Top achievements
Rank 1
Share this question
or