RadNavigation and controlling Height of dropdowns

[Keith]

With the RadNavigation, is there a way to control the height of the dropdowns for when the nodes are not in the more Menu (sandwich button) and controlling the height of the dropdown for the more Menu (sandwich button)?

 

Sincerely,

Keith Jackson

[Ivan Danchev]

Hello Keith,

The height of both dropdowns can be set with CSS. Here are two rules, both applying the same height (150px) to the corresponding dropdowns:

/*dropdowns*/
.rnvPopup {
   height: 150px;
}

/*dropdown in sandwich button*/
.rnvMorePopup {
    height: 150px;
}

Regards,
Ivan Danchev
Telerik by Progress

[Keith]

Thanks Ivan!  That works good.

Is there a way to do max height set up?

For example, lets say that there is not enough menu items to cover the full 150px height or whatever the height is set to and there is enough on the screen to go to the height setting, I would like the menu to drop down the height that it needs and only go to the max height when need to.  Is that possible?  If so then what is the best way to do that?

Sincerely,

Keith Jackson

[Ivan Danchev]

Hello Keith,

In that case instead of setting the "height" property you can set the "max-height" and "overflow" ones as shown below:

/*dropdowns*/
.rnvPopup {
   max-height: 150px;
   overflow: auto;
}

/*sandwich button*/
.rnvMorePopup {
    max-height: 150px;
    overflow: auto;
}

This way if you have just one or two items in the dropdown its height will be just enough to fit them, i.e. it won't be automatically set to 150px for each dropdown, but if there are multiple items that cannot fit in 150px the dropdown's height will be set to 150px (max height) and a scroll bar (overflow) will appear. 

Regards,
Ivan Danchev
Telerik by Progress

[Keith]

Hi Ivan,

    Thanks for your help!

    I have tried that code.  Works good in windows but not on an iPhone 6S.  On an iPhone 6S in Safari and Chrome for iOS, if there is enough items that cannot fit into the max height setting then it goes to the max height but it will not scroll.

    When I tried max-height by itself, it shows all the items regardless if the items fit into the max height setting or not.  Dropdown of the menu has the white background and goes to the height of the max height setting but more items show up passed the end of the dropdown.  That is just very weird and occurs on any system.

    When I tried using "height", it worked good on all systems but if you tap on 1 of the menu items at the top or near the top then it forces the rest of the menu down the height setting regardless if it has enough child items to fill that space or not.

    Nodes are programmatically created in the Navigation menu based on what the user has access to. "max-height" setup works good for most users but not for the users with admin level that have access to all applications on the web site. "height" setup works good for the admin level users but not the rest of the users.

    Need help to find a happy medium that works good for both non-admin users and admin level users.

    Please help!

Sincerely,

Keith Jackson

[Ivan Danchev]

Hello Keith,

Do you apply other custom styles that could be overriding the ones we suggested? Could you try them our by adding !important, for example: max-height: 150px !important; so we can be sure they take precedence. At my end the scrolling works correctly on iPhone, the dropdown respects the max-height value and tapping, holding down and dragging up/down scrolls the nodes.

Regards,
Ivan Danchev
Telerik by Progress

[Keith]

Hi Ivan,

    I have tried putting !important with max-height and overflow.  On iPhone 6S, it works good and scrolls in landscape position but still will not scroll in portrait position.  That is strange.  No problem on other mobile devices or in Windows.

    I am working on a test page to help show you what I am seeing. So far I have not seen the problem show up with the test page.  The only difference between the test page and the other page is that the test page does not have the nodes being programmatically created.

    I will let you know what I find.

Sincerely,

Keith Jackson

[Keith]

Hi Ivan,

    I was able to narrow down what is causing the problem.

    The problem occurs when the text for the child node is more than 24 characters long in the Sandwich menu.  It does not matter if the nodes for the RadNavigation are created at design time or created programmatically just as long as each child node has the NavigationUrl set to a page on the web site.

    The problem occurs on iOS.

     How to resolve this?

     Please help!

Sincerely,

Keith Jackson

[Keith]

I have a test page that will show the problem.  The problem will occur when you tap on Sandwich menu, tap on Strings, and then try tapping/holding down to scroll up/down. When tapping/holding down and sliding finger up/down, the page will move but the menu will NOT scroll.

Here is the ASP.Net code of the test page that shows the problem:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestPage6.aspx.vb" Inherits="TestPage6" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modal
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
        html .rnvItem {
            font-size:large;
        }
        .container {
            margin: 0 20px 0 0px;

        }
        @media (max-width:360px) and (orientation:portrait){
            /*dropdowns*/
            .rnvPopup {
                max-height: 400px !important;
                overflow: auto !important;
                /*height: 400px;*/
            }
            /*dropdown in sandwich button*/
            .rnvMorePopup {
                max-height: 400px !important;
                overflow: auto !important;
                /*height: 400px;*/
            }
        }
        @media (max-width:360px) and (orientation:landscape){
            /*dropdowns*/
            .rnvPopup {
                max-height: 140px !important;
                overflow: auto !important;
                /*height: 140px;*/
            }
            /*dropdown in sandwich button*/
            .rnvMorePopup {
                max-height: 140px !important;
                overflow: auto !important;
                /*height: 140px;*/
            }
        }
        @media (min-width:361px) and (max-width:768px) and (orientation:portrait){
            /*dropdowns*/
            .rnvPopup {
                max-height: 400px !important;
                overflow: auto !important;
                /*height: 400px;*/
            }
            /*dropdown in sandwich button*/
            .rnvMorePopup {
                max-height: 400px !important;
                overflow: auto !important;
                /*height: 400px;*/
            }
        }
        @media (min-width:361px) and (max-width:768px) and (orientation:landscape){
            /*dropdowns*/
            .rnvPopup {
                max-height: 140px !important;
                overflow: auto !important;
                /*height: 140px;*/
            }
            /*dropdown in sandwich button*/
            .rnvMorePopup {
                max-height: 140px !important;
                overflow: auto !important;
                /*height: 140px;*/
            }
        }
        @media (min-width:769px) and (max-width:1024px) and (orientation:landscape){
            /*dropdowns*/
            .rnvPopup {
                max-height: 140px !important;
                overflow: auto !important;
                /*height: 140px;*/
            }
            /*dropdown in sandwich button*/
            .rnvMorePopup {
                max-height: 140px !important;
                overflow: auto !important;
                /*height: 140px;*/
            }
        }
        @media (min-width:1025px) and (max-width:1280px) and (orientation:landscape){
            /*dropdowns*/
            .rnvPopup {
                max-height: 340px !important;
                overflow: auto !important;
                /*height: 340px;*/
            }
            /*dropdown in sandwich button*/
            .rnvMorePopup {
                max-height: 340px !important;
                overflow: auto !important;
                /*height: 340px;*/
            }
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no, height=device-height" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        function OnClientLoad(sender) {
            sender.set_minWidth(400);
        }
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
    </script>
</head>
<body style="background-color: #3A4459">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <div class="container">
            <table style="width:100%;">
                <tr>
                    <td style="width:50%;text-align:left">
                        <img alt="RSDC of Michigan" src="/images/RSDClogo_20160812.png" style="max-width:55%;height:auto;" />
                    </td>
                    <td style="width:50%;text-align:right">
                        <telerik:RadButton ID="rbtnLogout" runat="server" Style="z-index: 50" Text="Logout" RenderMode="Lightweight">
                            <Icon PrimaryIconUrl="~/images/Log-Out-icon16.png"  PrimaryIconLeft="4" PrimaryIconTop="7"></Icon>
                        </telerik:RadButton>
                    </td>
                </tr>
            </table>
            <br />
            <telerik:RadNavigation ID="RadNavigation1" runat="server"  Style="z-index: 50" MenuButtonPosition="Right"  OnClientLoad="OnClientLoad" Font-Bold="True" OnClientNodeClicking="clicking">
            <Nodes>
                <telerik:NavigationNode Text="Percussions">
                    <Nodes>
                        <telerik:NavigationNode Text="Percussion sets"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Congas"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Slow Loading Page Test" NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Djembes"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Cajons, Cajintos, Yambus"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Hand Drums"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Tambourines"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Maracas"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Pianos & E-Pianos">
                    <Nodes>
                        <telerik:NavigationNode Text="Grand pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Upright pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Disklavier"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Silent pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Hybrit pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Digital pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="State pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Accessories"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Strings">
                    <Nodes>
                        <telerik:NavigationNode Text="Violins and Violas" NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Electric Violins and Violas" NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Electric Cellos" NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Double Basses" NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="1 Electric Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="2 Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="3 Electric Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="4 Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="5 Electric Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="6 Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="7 Electric Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="8 Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="9 Electric Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="10 Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="11 Electric Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="12 Accessories for Violins and Violas"  NavigateUrl="http://172.20.3.78:86/SlowLoadingPageTest.aspx"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Wind Instruments">
                    <Nodes>
                        <telerik:NavigationNode Text="Saxophones"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Trumpets"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Flugelhorns"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Trombones"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Horns"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Flutes"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Clarinets"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Audio & PA">
                    <Nodes>
                        <telerik:NavigationNode Text="Loudspeakers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Power Amplifiers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Intecoms"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Audiotools"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Microphones"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Mixing Desks"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Studio Monitors"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Digital Converters"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Synchronizers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Controllers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Audio Interface"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="MIDI Equipment"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Lighting & Stage">
                    <Nodes>
                        <telerik:NavigationNode Text="Club & Disco"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Stage"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Cinema & TV"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Architectural & Decorative Lighting"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Controller & Dimmer"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Lighting Stands & Grip"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Video & Multimedia">
                    <Nodes>
                        <telerik:NavigationNode Text="Camera support"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Video Processing"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Displays"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Projectors"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Screens"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Interactive Screens"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Cables & Connectors">
                    <Nodes>
                        <telerik:NavigationNode Text="Instrumental Cables"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Microphone Cables"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Guitar Cables"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="XLR connectors"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Jack"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Banana Connectors"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Accessories">
                    <Nodes>
                        <telerik:NavigationNode Text="Stands"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Seats and Stools"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Metronomes and Tuners"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Batteries and Charging sets"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Clothing"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
            </Nodes>
            </telerik:RadNavigation>
        </div>
        <div class="loading" align="center" style="z-index:100000">
            Loading. Please wait.<br />
            <br />
            <img src="loader.gif" alt="" />
        </div>
        <script type="text/javascript">
            function clicking(sender, args) {
                var node = args.get_node();
                var clickedNode = node.get_text();
                mainmenu = $find("<%= RadNavigation1.ClientID%>");
                var expandedNode = mainmenu.get_expandedNode();

                if (clickedNode.toUpperCase() != 'PERCUSSIONS' && clickedNode.toUpperCase() != 'PIANOS & E-PIANOS' && clickedNode.toUpperCase() != 'STRINGS' && clickedNode.toUpperCase() != 'WIND INSTRUMENTS' && clickedNode.toUpperCase() != 'AUDIO & PA' && clickedNode.toUpperCase() != 'LIGHTING & STAGE' && clickedNode.toUpperCase() != 'VIDEO & MULTIMEDIA' && clickedNode.toUpperCase() != 'CABLES & CONNECTORS' && clickedNode.toUpperCase() != 'ACCESSORIES') {
                    if ($telerik.isMobileSafari) {
                        //alert("Mobile Safari!")
                        if (expandedNode != null) {
                            expandedNode.collapse();
                        }
                        mainmenu.collapseMenuButton();
                        ShowProgress();

                        if (args.get_node().get_navigateUrl()) {
                            args.set_cancel(true);
                            setTimeout(function () {
                                window.location.href = args.get_node().get_navigateUrl();
                            }, 300);
                        }
                    }
                    else {
                        //alert("Not Mobile Safari!")
                        if (expandedNode != null) {
                            expandedNode.collapse();
                        }
                        mainmenu.collapseMenuButton();
                        ShowProgress();
                    }
                }
            }
        </script>
    </form>
</body>
</html>

Here is the code-behind for the test page:

Imports System.Data
Imports Telerik.Web.UI

Partial Class TestPage6
    Inherits System.Web.UI.Page

    Private dsUserAppList As DataSet
    Private sql As String
    Private strErrorMsg As String = ""

    Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        Try
            If Request.IsAuthenticated Then
                If Not IsPostBack Then
                    'AddMenuItemsBasedOnUser()
                End If
            Else
                FormsAuthentication.RedirectToLoginPage()
            End If

        Catch ex As Exception
            strErrorMsg = "Procedure: Page_Init - TestPage6" & vbCrLf & "Error Message: " & ex.Message & vbCrLf & "Source: " & ex.Source
            UserFunctions.UserMsgBox(Me, strErrorMsg)

        End Try
    End Sub

    Protected Sub rbtnLogout_Click(sender As Object, e As EventArgs) Handles rbtnLogout.Click
        Try
            LoginValidation.LogoutUser()
        Catch ex As Exception
            strErrorMsg = "Procedure: rbtnLogout_Click - TestPage6" & vbCrLf & "Error Message: " & ex.Message & vbCrLf & "Source: " & ex.Source
            UserFunctions.UserMsgBox(Me, strErrorMsg)
        End Try

    End Sub

End Class

Please help!

Sincerely,

Keith Jackson

[Keith]

Hi Ivan,

    I have submitted a support ticket for that issue.

    Thanks for your help!

Sincerely,

Keith Jackson

[Ivan Danchev]

Hi Keith,

I replied in the support thread you opened. If the suggested workaround works at your end we can post it in this thread as well. It would be helpful in case anyone else faces a similar issue.

Regards,
Ivan Danchev
Telerik by Progress