rmfocused not begin applied

4 posts, 0 answers
  1. Larevenge
    Larevenge avatar
    38 posts
    Member since:
    Jul 2009

    Posted 21 Nov 2015 Link to this post

    Hi there,

    Following your example on the TripXpert demo I wanted to style my menu exactly the same. Everything works fine, except that .rmfocused is not being applied. I have searched for hours, trying to add keyboard navigation to enable it, trying solutions from the forum like http://www.telerik.com/forums/how-to-get-rmfocused-on-menu-item or from stackoverflow but I was still not succesfull to enable this.

    The thing i want to achieve is what I have attached as 1.png but the thing i get is what i attached as 2.png.

    I use a masterpage with the following code:

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <div id="Header">
            <asp:ContentPlaceHolder ID="cphMenu" runat="server">
            </asp:ContentPlaceHolder>

     with the css applied to the header like this:

    #Header {
        position: fixed;
        z-index: 10000;
        height: 100px;
        background: #fff;
        width: 100%;
    }
     

     Then on the aspx page i have the following code:

    <asp:Content ID="Content2" ContentPlaceHolderID="cphMenu" runat="server">
        <telerik:RadMen runat="server ID="MainNav EnableEmbeddedSkins="false CssClass="tx_desctop_nav_menu" nItemClick="RadMenu1_ItemClick">
        </telerik:RadMenu>
        <telerik:RadMen runat="server ID="MainNavMobile RenderMode="Mobile" ssClass="tx_mobile_nav_menu" nItemClick="RadMenu1_ItemClick">
        </telerik:RadMenu>
    </asp:Content>

    My code on the server side is this:

    protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
    {
        MpKlant.PageViews.Clear();
        RadPageView pageView = new RadPageView();
        pageView.ID = e.Item.Value;
        MpKlant.PageViews.Add(pageView);
        pageView.Selected = true;
    }
     and loading the radmenu items like this:
    RadMenuItem rmiNav2 = new RadMenuItem();
    rmiNav2.Value = "MijnBerekeningen";
    rmiNav2.Text = "Mijn berekeningen";
    MainNav.Items.Add(rmiNav2);

    I use the css classes from the example, but how can I get the .rmfocused being applied to the li.rmitem?

    Kind Regards,

    Corné

     

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 25 Nov 2015 Link to this post

    Hi Larevenge,

    I have copied the code that you had provided into a sample project, but the appearance is different as in the 2.png. I am sending you this video that shows the result. Could you provide all CSS that is necessary to achieve the layout from the second screenshot? The other option is to open a support ticket to be able to provide us with a modified version of the tested project in the attachment.

    Regards,
    Magdalena
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Larevenge
    Larevenge avatar
    38 posts
    Member since:
    Jul 2009

    Posted 26 Nov 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

    I'm using the css from the TripXpert demo on your website, this is the specific part of the CSS which I use:

    /*>>Desctop navigation*/
    div.tx_desctop_nav_menu.RadMenu {
        font-size: 2em;
        position: absolute;
    }
     
    .tx_desctop_nav_menu.RadMenu .rmItem {
        height: 46px;
        padding: 1.2em 1.25em .5em 1.25em;
    }
     
    .tx_desctop_nav_menu.RadMenu .rmItem a {
        padding: 0;
    }
     
    .RadMenu .rmItem a:hover {
        color: #25a0da;
    }
     
    .tx_desctop_nav_menu.RadMenu .rmSelected a {
        color: #fff;
    }
     
    div.tx_desctop_nav_menu.RadMenu .rmSelected {
        height: 86px;
        background: #54a506;
        color: #ffffff;
    }
     
    div.tx_desctop_nav_menu.RadMenu .rmSelected a {
        border-top: 2px solid white;
        margin-top: -2px;
    }
     
    .tx_desctop_nav_menu.RadMenu .rmFocused a {
        color: #fff;
    }
     
    div.tx_desctop_nav_menu.RadMenu .rmFocused {
        height: 86px;
        background: #54a506;
        color: #ffffff;
    }
     
    div.tx_desctop_nav_menu.RadMenu .rmFocused a {
        border-top: 2px solid white;
        margin-top: -2px;
    }
     
    div.tx_desctop_nav_menu.RadMenu .rmRootGroup,
    div.tx_desctop_nav_menu.RadMenu .rmRootGroup .rmItem {
        border: 0 none;
    }
    /*<<Desctop navigation*/
     
    /*>>Mobile navigation*/
    div.tx_mobile_nav_menu {
        float: right;
        margin: 20px 22px;
        display: none;
    }
     
    div.tx_mobile_nav_menu .rmRootToggle {
        color: #858585;
    }
     
    .RadMenuPopup.tx_mobile_nav_menu {
        z-index: 600;
    }
     
    @media only screen and (max-width: 768px) {
        div.tx_mobile_nav_menu {
            margin-top: .7em;
        }
    }
     
    @media only screen and (max-width: 1024px) {
     
        div.tx_desctop_nav_menu {
            display: none;
        }
     
        div.tx_mobile_nav_menu {
            display: block;
        }
    }

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 27 Nov 2015 Link to this post

    Hi Larevenge,

    I have applied all code that you have provided and when I inspected the .rmItem element, it covers all item text properly. It seems that there are some additional styles that are applied to the page.

    I am sending you also the tested project in the attachment. Please, modify the project so the issue will be reproduced and open a support ticket to be able to send back to us the modified version so we will be able to test it locally and can assist you in more efficient way.

    Regards,
    Magdalena
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top