Radmenu Responsive?

4 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 04 Mar Link to this post

    I keep reading that the RadMenu is responsive, etc. I have added it to our page and when I resize the page the menu does not change. Does it only change if you are actually on a mobile device? Is there a way to have it change in the 'small' version like things do when you are using the RadPaygLayout control?
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 04 Mar Link to this post

    Hi,

    The RadMenu features Elastic and Adaptive behavior. You may enable different rendering for desktop and mobile browsers. This is achieved by setting its RenderMode property to Auto.

    With RenderMode="Auto" when viewed on a mobile device browser, controls would try to render in the following order of render mode fallback priority:
    - Controls supporting Mobile would be rendered as Mobile;
    - Controls supporting Lightweight render mode would be rendered as Lightweight;
    - If a certain control does not support Lightweight, it will be rendered as Classic.

    In order for RenderMode="Auto" to work properly, you should add a reference to the RadDeviceDetectionFramework to your project, which would enable detection of mobile browsers on the server.


    So if you complete the steps above, you should get Mobile RadMenu when viewed on mobile devices and Lightweight when viewed on desktop computers and notebooks.

    I hope the above explains how RenderMode="Auto" works.

    Note that the RadMenu would remain Lightweight on desktop browsers, no matter whether you make the browser window smaller or not. To overcome this in the Responsive Web Design Application, we have used two menus, one in Mobile and another in Lightweight. We are hiding one of them and showing the other with media queries, in order to put mobile menu on a desktop browser when the window is made smaller. You may download the application source code and check how it is implemented.

    Since you are looking for a similar behavior to the RadPageLayout control, I would recommend you to try our new control - RadNavigation - released with Q1 2015. It features a button dropdown group and hides in it items, which cannot fit on its main strip. These changes are done client-side and the control would change its appearance on resizing the browser window as well. For further reference, you may browse the RadNavigation online demos and help articles.


    Regards,
    Dimitar
    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. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 04 Mar in reply to Dimitar Link to this post

    Thank you for the help. The RadNavigation looks promising except it looks horrible visually. I had the RadMenu looking nice with just setting the backcolor, color and a few others. I cannot get the RadNavigation to look 'nice. 

    How do I get rid of all the padding? It does not need to be like 50+ pixels tall. If I set the height it cuts the words vs centering them and the mouse hover is off as well.....

    Any ideas?

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 07 Mar Link to this post

    Hello Stephanie,

    You can reduce RadNavigation height by customizing its padding for example by by the following:
    html .RadNavigation .rnvRootLink {
        padding: 4px 10px;
    }
     
    html .RadNavigation .rnvMore {
        padding: 4px;
    }


    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