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

[David]

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>

[David]

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%;

    }

}

[Stefan]

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

 

 

[David]

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!