RadContextMenu Styling Issue

[Rahul]

Hi,

We are using RadContextMenu and wants to set RadMenuItem height dynamically and also reduce the width of left Grey bar on context menu. Please help us.

Please find the attached screen shot for more clarification. 

Thanks,
Rahul

[Princy]

Hello Rahul,

Try the following CSS to reduce the size of ContextMenuItem and also to reduce the width of left grey bar
CSS:

<style type="text/css">
    .RadMenu_Default a.rmLink
    {
      font:10px/23px "Segoe UI",Arial,sans-serif !important;
    }
    .RadMenu .rmGroup .rmText
    {
      padding:0 0 0 0 !important;
    }
</style>

Thanks,
Princy.

[Rahul]

Thanks for reply but this is not the perfect solution as we want. We want to reduce the spacing between context items and also reduce the width of Grey bar.

Please find attached image for more clarification.

Thanks,
Rahul

[Kate]

Hi Rahul,

In order to change the width of the grey bar you can apply the following css class selectors and alter them as needed:

div.RadMenu .rmGroup .rmText
       {
           margin: 0 0 0 4px;
           padding: 0 51px 0 16px;
       }

div.RadMenu_Default .rmGroup,
div.RadMenu_Default .rmMultiColumn,
div.RadMenu_Default .rmGroup .rmVertical
       {
                     background-position: -9px 0;
       }

However, if you need to alter the line height of the items and still preserve the hover effect you will need to change the whole sprite image tha is applied to the RadContextMenu as described in this help article.

Regards,
Kate
the Telerik team

[Rahul]

Hi,

we have reduce the size of gray bar by adding new image of gray bar instead of default one, but due to this, one more issue is come that is regarding separator, it is not visible between context  menu items, we try to solve this by setting background color of separator to gray then it visible, in chrome only not in ie i am using ie 9 and latest chrome browser  

[Kate]

Hi Rahul,

Thank you for sharing your approach of solving the issue with us. Let me know if I can help you any further.

Kind regards,
Kate
the Telerik team

[Rahul]

Hi,

thanks for your appreciation, our fix works fine in Google Chrome Browser , but we are facing an issue in IE browser the separator on the context menu is not visible on IE ,please help us in this.

We have modified the CSS as :-

.RadMenu_Default a.rmLink
{
    font: 10px/20px "Segoe UI" ,Microsoft Sans Serif,Verdana,Arial !important;
    height:16px;
}
.RadMenu_Default .rmgroup .rmtext
{
    padding: 0 54px 0 18px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 4px !important;
}
.RadMenu_Default .rmgroup,
.RadMenu_Default .rmmulticolumn,
.RadMenu_Default .rmgroup .rmvertical
{
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #979797;
    border-right-color: #979797;
    border-bottom-color: #979797;
    border-left-color: #979797;
    background-image: url(/NDDS/Images/filter_scrollbar.png) !important;
    background-repeat:repeat-y !important;
    background-position:0px0px!important;
    background-color: white !important;
}
.RadMenu_Default .rmrootgroup .rmvertical .rmseparator .rmtext,
.RadMenu_context .rmvertical .rmseparator .rmtext
{
    margin-top: 1px !important;
    margin-right: 2px !important;
    margin-bottom: 0px !important;
    margin-left: 21px !important;
}
.RadMenu_Default .rmvertical .rmseparator .rmtext,
.RadMenu_Default .rmhorizontal .rmvertical .rmseparator .rmtext
{
    height: auto !important;
    width: auto !important;
    padding-bottom: 2px !important;
}
.RadMenu_Default_context .rmseparator .rmtext,
.RadMenu_Default .rmhorizontal .rmgroup .rmseparator .rmtext,
.RadMenu_Default .rmvertical .rmhorizontal .rmgroup .rmseparator .rmtext
{
    background-color: #eaeaea !important;
}



Thanks,




 

[Rahul]

Hi ,
We are waiting for reply on this as  this is really a critical issue for our application . So please provide us the solution asap , it will be really great to hear from you soon.

Thanks,

[Kate]

Hi Rahul,

I tested the styles that you provided along with the markup below but I am not able to get the appearance that you describe (see the attached images for both menu and contextmenu). Can you please open a support ticket and send us a simplified runnable project that demonstrates the appearance that you have so we can help you out?

<telerik:RadMenu ID="RadMenu1" runat="server">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem4">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
        <br />
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
        <Targets>
        <telerik:ContextMenuControlTarget ControlID="RadMenu1" />
        </Targets>
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" IsSeparator="True"
                            Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>

All the best,
Kate
the Telerik team