I am seeing an issue with the Kendo Responsive Panel component. There is a Kendo Menu inside the responsive panel, but when displaying the horizontal menu its showing horizontal and vertical scroll bars when hovering over the menu item that says Foo, and also its not showing the menu group item since the height of the responsive panel is limited to the initial height of the horiontal menu. I am using Kendo UI jQuery R2 2020. The code I have is as given below. The dojo sample can be seen at https://dojo.telerik.com/@sun21170/uPisoRoW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Kendo UI Responsive Panel is scrolling for a menu inside it</title>
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.common.min.css">
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.rtl.min.css">
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.moonlight.min.css">
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.mobile.all.min.css">
<script src="Scripts/kendoUIMVC/jquery.min.js"></script>
<script src="Scripts/kendoUIMVC/kendo.all.min.js"></script>
</head>
<body>
<nav id="nav1">
<button class="k-button" id="btnMenuToggle" data-role="button" role="button" aria-disabled="false" tabindex="0"><span class="km-icon km-drawer-icon"></span></button>
<div id="sidebar">
<ul id="mainMenu"></ul>
</div>
</nav>
<script>
$(document).ready(function() {
$("#sidebar")
.kendoResponsivePanel({
breakpoint: 769,//have this more than 768 since if its 768 then responsive panel will not display at screen width >= 768 rather than screen width > 768
orientation: "left",
toggleButton: "#btnMenuToggle"
})
.children("#mainMenu").kendoMenu({
orientation: ($(window).width() > 768 ? "horizontal" : "vertical"),
direction: "bottom left",
dataSource: [
{
text: "Foo", items: [
{text: "Qux ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
{text: "Hi Abc! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
{text: "Hi Klm! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
{text: "Hi Xyz! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"}
]
},
{text: "Bar"}
]
});
});
</script>
</body>
</html>
Hello,
I have a problem with changing the value of the breakpoint, for the responsive panel.
Example on the following code:
<body>
<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Home1</a>
<a href="#">Products1</a>
<a href="#">Home2</a>
<a href="#">Products2</a>
</nav>
<article>
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
Content
</article>
<script>
$("#navigation").kendoResponsivePanel({
breakpoint: 1020
});
console.log($("#navigation").data("kendoResponsivePanel").options.breakpoint);
$("#navigation").data("kendoResponsivePanel").options.breakpoint = 2000;
console.log($("#navigation").data("kendoResponsivePanel").options.breakpoint);
</script>
</body>
As the logs will tell you, the new value where the ResponsivePanel shoud start hiding the content is 2000px, that is not the case, the Panel activates at the initial value of 1020.
Is there a way to make this work, or does the ResponsivePanel not have this funktionality ?
Thanks !
I have the problem that the responsive panel closes again immediately after opening on some mobile devices.
This can be reproduced with Chrome browser on the desktop: Small window widths in desktop mode work nicely, but when I enable Galaxy or iPad emulation I get an immediate close event.
This scenario can also be reproduced with the snippets from the documentation Dojo: https://dojo.telerik.com/Iqozu
Futhermore with a longclick it can be openend, but then it does not close anymore.
Then I have tried to reproduce this issue in Windows Edge with iPad/Nexus emulation and it does not happen here.
Next step was to test another browser on my Galaxy and it did not happen there either.
Therefore in any way it has to be something with chrome browser and mobiles... hmmm
Many thanks for helping out here!
How do you tell if the panel is currently visible or hidden?
It seems to lack a "State" property, and show/hide events?
Could these be added, or are there existing properties/events I could use?
The Open/Close events appear to only fire when it is opened/closed MANUALLY?
Hi
I'm looking for the responsive panel cdn - I don't wish to use the kendo.all.min.js
I tried this:
https://kendo.cdn.telerik.com/2017.2.504/js/kendo.responsive-panel.min.js
but it didn't work
Any help on this?
Thanks :)
If you use orientation:"left", or orientation:"right", the width of the responsive panel changes as soon as the JavaScript instantiates the object. If you use orientation:"top", the width doesn't change, but when the panel is hidden, it leaves a gutter in its place.
I used your dojo at https://dojo.telerik.com/EbovAMIh to demonstrate this, using the following code.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>Kendo UI Snippet</
title
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"
/>
<
script
src
=
"https://code.jquery.com/jquery-1.12.4.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
header
>
<
button
class
=
"toggle-button"
><
span
class
=
"k-icon k-i-menu"
></
span
></
button
>
Logo
</
header
>
<
div
style
=
"display:flex;"
>
<
div
id
=
"navigation"
style
=
"flex-grow:0; background-color:red; width:100px;"
>
<
a
href
=
"#"
onclick
=
"menu.close();"
>Home</
a
>
<
br
/>
<
a
href
=
"#"
onclick
=
"menu.close();"
>Products</
a
>
</
div
>
<
div
style
=
"flex-grow:1; background-color:blue;"
>
Content
</
div
>
</
div
>
<
script
>
$("#navigation").kendoResponsivePanel({
orientation: "top",
toggleButton: ".toggle-button"
});
var menu = $("#navigation").data("kendoResponsivePanel");
</
script
>
</
body
>
</
html
>
Note that I put background colors in place to see the effect. If you change the value of orientation to top, left, and right, you can see what I'm talking about.
The behavior, as is, makes this unusable to me. I'm looking to using Bootstrap instead, but I was hoping you might be able to show me how to correct this behavior.
Thank you
Hello
Is it possible to toggle panel also when visible (wide screen). Running manually close/open is not doing anything. And I would like to be able close (manually) panel, then show it, also on wide screen.
I want to create a Layout which is similar to what's shown on the "What's New"-page but the actual Demo is pretty different.
Is it possible to create something like what you can see on the screenshot with pure Kendo UI elements or is additional styling / other Material Design libraries needed?
PS: I want to implement this in angular js
Your demo is not working. The configuration must be:
$(
"#navigation"
).kendoResponsivePanel({
orientation:
"top"
,
toggleButton:
".toggle-button"
});
not:
$(
"#navigation"
).kendoResponsivePanel({
orientation:
"top"
,
toggleButton:
"toggle-button"
});
You are missing dot (.).