I have added a custom skin to the RadGrid. I have made all the modifications to the Grid.CustomSkin.css file and my grid looks good. I am working on changing the combobox in the Pager. I am modifying ComboBox.CustomSkin.css but not all of my changes are working. I used the IE Developer toolbar and noticed that it is still pulling the css from Telerik.Web.UI.WebResource.axd. How do I prevent it from doing that?
5 Answers, 1 is accepted
0
Accepted
Hello mk,
RadComboBox uses a base stylesheet, which contains some styles, which normally should not be changed. If you need to override some of the base styles, you simply have to use a higher specificity for your custom skin styles. For example:
base CSS
.RadComboBox table td.rcbInputCell
{
width: 100%;
height: 20px;
line-height: 20px;
vertical-align: middle;
padding: 0;
border: 0;
}
your custom CSS
div.RadComboBox table tr td.rcbInputCell
{
height: 21px;
line-height: 21px;
}
More information about CSS specificity is available at:
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx
Best wishes,
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.
RadComboBox uses a base stylesheet, which contains some styles, which normally should not be changed. If you need to override some of the base styles, you simply have to use a higher specificity for your custom skin styles. For example:
base CSS
.RadComboBox table td.rcbInputCell
{
width: 100%;
height: 20px;
line-height: 20px;
vertical-align: middle;
padding: 0;
border: 0;
}
your custom CSS
div.RadComboBox table tr td.rcbInputCell
{
height: 21px;
line-height: 21px;
}
More information about CSS specificity is available at:
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx
Best wishes,
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
JH
Top achievements
Rank 1
Rank 1
answered on 29 Mar 2010, 02:52 PM
Hi,
I have the exact same problem.
I need to change the pager's combobox's z-index to a higher value.
Lets say that my custom RadGrid skin is called "SkinName". What syntax is then necessary in order to set the comobox's z-index?
BR
I have the exact same problem.
I need to change the pager's combobox's z-index to a higher value.
Lets say that my custom RadGrid skin is called "SkinName". What syntax is then necessary in order to set the comobox's z-index?
BR
0
Hello JH,
One option is to use CSS:
.rcbSlide
{
z-index: ....... ;
}
Another option (recommended) is to obtain a reference to the RadComboBox (the ID is PageSizeComboBox) and set its ZIndex property at runtime. Here is how to obtain the reference:
http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-remove-quot-page-size-quot-dropdown.aspx
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.
One option is to use CSS:
.rcbSlide
{
z-index: ....... ;
}
Another option (recommended) is to obtain a reference to the RadComboBox (the ID is PageSizeComboBox) and set its ZIndex property at runtime. Here is how to obtain the reference:
http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-remove-quot-page-size-quot-dropdown.aspx
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.
0
JH
Top achievements
Rank 1
Rank 1
answered on 30 Mar 2010, 08:06 AM
Hi,
Thank you for the quick answer.
CSS is favorable for me, but I did not succeed using your suggestion.
I have tried both these approaches in my Grid.MySkin.css.
Thank you for the quick answer.
CSS is favorable for me, but I did not succeed using your suggestion.
I have tried both these approaches in my Grid.MySkin.css.
.rcbSlide
{
z-index:10000000 !important;
}
.RadGrid_MySkin
.rcbSlide
{
z-index:10000000 !important;
}
What's wrong?
0
Hi JH,
All the best,
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.
The second CSS rule will not work, because rcbSlide is outside RadGrid. However, the first should work. Please make sure that the stacking contexts are OK.
http://blogs.telerik.com/atanaskorchev/posts/09-07-02/z-index_demystified.aspx
If you need further assistance, please send us a runnable demo.
All the best,
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.