Mobile Menu (menu inside responsive panel) closes immediately in safari

4 posts, 1 answers
  1. David
    David avatar
    6 posts
    Member since:
    Apr 2016

    Posted 18 Aug Link to this post

    Background:

    I have a responsive website where a kendo menu and responsive panel are used to create a responsive menu.  All links visible when on a large screen, but it collapses to an expandable menu when on smaller devices).

    Examples:

    http://demos.telerik.com/kendo-ui/responsive-panel/index

    http://docs.telerik.com/kendo-ui/api/javascript/ui/responsivepanel

     

    Issue:

    This works beautify on every single device/browser with the exception of safari (testing on an ipad).  When hitting the menu button, the menu will appear for a split second then close right away.

     

    I found that it works fine in safari ONLY for pages WITHOUT images (yes, you read that right - i remove all <img> tags and it works fine).  I searched ever CSS file, inspected the elements in chrome, and i don't see any unusual styles being applied to images.  What could possibly be clashing in safari to cause this??  Any insight is appreciated!

     

     

    This code was plucked from a previous developer online (i remember seeing it but can't find the link again):

    01.<button id="mobilemenu" class="k-rpanel-toggle k-button btn-toggle">
    02.    <span class="k-icon k-i-hbars"></span>
    03.   </button>
    04.    
    05.  <div id="responsive-panel">
    06. 
    07.        <ul id="menu" class="">
    08.            <li>Home</li>
    09.            <li>Link2</li>
    10.            <li>Link3</li>
    11.            <li>Link4</li>
    12.            <li>Link5</li>
    13.            <li>Link6</li>
    14.        </ul>
    15.    </div>
    16.   
    17.  <script>
    18.    $(function(){
    19.      $("#menu").kendoMenu({
    20.        select: onMeunSelect
    21.      });
    22. 
    23.     
    24.      $("#responsive-panel").kendoResponsivePanel({
    25.          breakpoint: 992,
    26.          autoClose: false,
    27.          orientation: "top"
    28.      });
    29.    });
    30.  </script>

  2. David
    David avatar
    6 posts
    Member since:
    Apr 2016

    Posted 18 Aug in reply to David Link to this post

    I forgot to mention.  The mobile "break point" is 992px.

    When I apply the following the menu will appear in safari, the menu will appear ONLY after following these exact steps:

     - Load page

     - Hit menu button (nothing happens) 

     - turn to landscape view

     - hit menu button (menu appears!)

     - turn back to vertical orientation (menu appears!)

     

    @media only screen and (max-width: 992px){
     
        #menu {
           position: fixed;
           z-index: 999999;
           width: 100%;
     
        }
     
    }

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 23 Aug Link to this post

    Hello David,

    The menu is closed immediately after it is opened in Safari because the resize event of the window object is fired. The Kendo UI Menu is closing automatically on the window resize event by design. The resize event is fired when the menu is opened, only if the window element is scrollable. As this is a browser specific behaviour the Kendo UI developers' team has no control over it.

    I can suggest a workaround in this scenario:

    1) Set the orientation property of the Kendo UI ResponsivePanel to "left".
    2) After the orientation is set to "left" a misalignment can occur. It can be fixed using the following CSS rules. Please have in mind that the suggested CSS rules may need to be modified depending on the implementation:

    #responsive-panel.k-rpanel-expanded {
     margin-left: 40px;
    }
           
    #responsive-panel + * {
     display: block;
     clear:both;
    }
     

    If the element after the Responsive Panel will be the same and known, I recommend using a different appropriate selector in the second rule above, instead of the universal selector, which is less performant. You can add an empty <div> with some custom CSS class to take care of clearing the Responsive Panel's float.

    I hope this is helpful.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  5. David
    David avatar
    6 posts
    Member since:
    Apr 2016

    Posted 25 Aug in reply to Stefan Link to this post

    I needed to tweak the styles a little but for my particular application but this worked (changing direction from top to left).  I'm glad the stake holders were OK with modifying this behavior.  Thanks again!
Back to Top
Kendo UI is VS 2017 Ready