ON applying filteration within Radgrid our already written WebBlue of Radmenu is overriden by inbuilt WebBlue of Radmenu

[prashant]

Hi,
Problem: In every aspx where we have applied AllowFilteringByColumn="true" within the RadGrid the following .RadMenu_WebBlue class defined within css file is overriden by the inbuilt Webblue skin of Radmenu and bcoz of that we are facing Distortion problem:

.RadMenu_WebBlue

{
padding: 0 30px;

 

 

background: url(img/MenuBackground.gif) #d5d9de repeat-x;

 

 

line-height: 38px; }

Distortion: in defined class height=38 and at runtime it overrides this class with inbuilt WeBlue class which is having height=23 so bcoz of height difference it looks like that the image into two and in the second part white color appears coz in actuall there is only one image which appears in first part

Please help me out for this problem if anybody is having any idea.

Thanks in advance
Prashant
9810494465

 

[Dimo]

Hello Prashant,

It is not recommended to use custom skins with the same name as embedded skins, precisely because such problems might occur if the two skins are used on the same page.

Please, either rename your custom filtering menu skin, or increase the specificity of the overridden CSS rule. For example use:

div.RadMenu_WebBlue
{
      .......
}

instead of

.RadMenu_WebBlue
{
      .......
}


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[prashant]

Hi,
Thanks for the reply but unfortunately it didn't worked.
Actually on the mouseover of the RadMenu Item it still splits the image in 2 parts because of height difference and 2nd part appears in white color. Following is the css file:
.RadMenu_WebBlue
{
    padding: 0 30px;
    background: url(img/MenuBackground.gif) #d5d9de repeat-x;
    line-height: 38px;
}

.RadMenu_WebBlue_Context
{
    background: none;
    border-top: 1px solid #d2d8de;
    padding: 0;
}

.RadMenu_WebBlue a.rmLink, .RadMenu_WebBlue a.rmLink:visited
{
    text-decoration:none;
    font-weight: bold;
    text-align:  center;
    line-height: 38px;   
    width:auto;
    color: White;
}

.RadMenu_WebBlue a.rmLink img
{
    margin-top: 10px;
    vertical-align: text-bottom;
    line-height: 38px;
}

.RadMenu_WebBlue .rmLink:hover,
.RadMenu_WebBlue .rmFocused,
.RadMenu_WebBlue .rmExpanded
{
    /*color: #276c9d;*/
    color: #1a242a;
    font-weight: bold;
    background: url('img/MainItemBackground.gif');
    background-repeat: no-repeat;
    background-position: center;   
}

.RadMenu_WebBlue .rmText
{
    font-size: 11px;
    padding: 0px 24px;
    /*color: White;*/
}

.RadMenu_WebBlue .rmGroup
{
    border: solid 1px #d2d8de;
    border-top: 0px;
    border-bottom: 0px;
    background: #f0f2f4;
}

.RadMenu_WebBlue .rmGroup .rmLink, .RadMenu_WebBlue .rmGroup .rmLink:visited
{
    border-top: solid 1px #f6f7f9;
    border-bottom: solid 1px #dde1e4;
    border-left: 0px;
    border-right: 0px;
    width: auto;
    text-align: left;
    color: #333;
}

.RadMenu_WebBlue .rmGroup .rmText
{
    padding-left: 10px;
    font-weight: normal;
    padding-right: 20px;
}

.RadMenu_WebBlue .rmGroup .rmLink:hover,
.RadMenu_WebBlue .rmGroup .rmFocused,
.RadMenu_WebBlue .rmGroup .rmExpanded
{
    background: white;
    /*color: #5984a2;*/
    color: #276c9d;
    font-weight: normal;
    border-top: solid 1px #f6f7f9;
}
/*
.RadMenu_WebBlue .rmGroup .rmLink:visited
{
    color:White;
}*/

.RadMenu_WebBlue .rmLeftArrow,
.RadMenu_WebBlue .rmRightArrow,
.RadMenu_WebBlue .rmTopArrow,
.RadMenu_WebBlue .rmBottomArrow,
.RadMenu_WebBlue .rmLeftArrowDisabled,
.RadMenu_WebBlue .rmRightArrowDisabled,
.RadMenu_WebBlue .rmTopArrowDisabled,
.RadMenu_WebBlue .rmBottomArrowDisabled
{
    border-left: 1px solid #d2d8de;
    border-left: 1px solid #d2d8de;
    background: #889bb0 url(img/left.gif) center center no-repeat;
    width:15px;
    text-decoration:none;
    text-indent:-3000px;
    color:#889bb0;
    overflow:hidden;
}

.RadMenu_WebBlue .rmTopArrow,
.RadMenu_WebBlue .rmTopArrowDisabled
{
    background-image:url(img/top.gif);
    width:100%;
}

.RadMenu_WebBlue .rmBottomArrow,
.RadMenu_WebBlue .rmBottomArrowDisabled
{
    background-image:url(img/bottom.gif);
    width:100%;
}

.RadMenu_WebBlue .rmRightArrow,
.RadMenu_WebBlue .rmLeftArrow
{
    height:100%;
}

.RadMenu_WebBlue .rmRightArrow,
.RadMenu_WebBlue .rmRightArrowDisabled
{
    background-image: url(img/right.gif);
}

.RadMenu_WebBlue .rmVertical .rmSeparator
{
    padding-top: 3px;
    background: #f7f7f7 url(img/Separator.gif) no-repeat right;
    font-size: 0;
    border-top:0;
    border-bottom:0;
    line-height: 0;
}

.RadMenu_WebBlue .rmExpandLeft,
.RadMenu_WebBlue .rmExpandRight
{
    background:transparent url(img/groupImage.gif) right center no-repeat;
}

.RadMenu_WebBlue .rmLink:hover .rmExpandLeft,
.RadMenu_WebBlue .rmLink:hover .rmExpandRight,
.RadMenu_WebBlue .rmFocused .rmExpandLeft,
.RadMenu_WebBlue .rmFocused .rmExpandRight,
.RadMenu_WebBlue .rmExpanded .rmExpandLeft,
.RadMenu_WebBlue .rmExpanded .rmExpandRight
{
    background:transparent url(img/invertedGroupImage.gif) right center no-repeat;
}

/*right-to-left support*/

.RadMenu_WebBlue_rtl,
.RadMenu_WebBlue_rtl *
{
    text-align:right !important;
}

.RadMenu_WebBlue_rtl .rmGroup .rmText
{
    padding-left: 20px;
    padding-right: 10px;
}

.RadMenu_WebBlue_rtl .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmExpandRight
{
    background:transparent url(img/left.gif) left center no-repeat;
}

.RadMenu_WebBlue_rtl .rmLink:hover .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmLink:hover .rmExpandRight,
.RadMenu_WebBlue_rtl .rmFocused .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmFocused .rmExpandRight,
.RadMenu_WebBlue_rtl .rmExpanded .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmExpanded .rmExpandRight
{
    background:transparent url(img/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_WebBlue_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_WebBlue_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_WebBlue_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_WebBlue_rtl .rmGroup .rmExpanded .rmExpandRight
{
    background:transparent url(img/left.gif) left center no-repeat;
}

[Dimo]

Hi Prashant,

The problem is that on one page you have two CSS files with the same CSS classes, but different styles assigned to these classes. As I said in my previous post, this is not recommended.

To make your life easier, please rename your custom WebBlue RadMenu skin to something else, e.g. WebBlue2. Otherwise, you will need to modify your custom skin rule by rule and increase the specificity of the selectors until it is not overridden by the embedded WebBlue skin used by RadGrid. If you are not very confident with CSS, you will waste a lot of time.


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[prashant]

thanks it worked