RadContextMenu Styling Issue

9 posts, 0 answers
  1. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 06 Sep 2011 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Sep 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 07 Sep 2011 Link to this post

    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
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Sep 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 14 Sep 2011 Link to this post

    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  
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 14 Sep 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
  8. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 14 Sep 2011 Link to this post

    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,




     
  9. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 15 Sep 2011 Link to this post

    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,
  10. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Sep 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017