Telerik Forums
Kendo UI for jQuery Forum
0 answers
64 views

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>

SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 27 Aug 2024
1 answer
242 views

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 !

Dimitar
Telerik team
 answered on 01 Apr 2019
7 answers
248 views

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!

gregory
Top achievements
Rank 1
 answered on 06 Mar 2019
4 answers
138 views

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?

gregory
Top achievements
Rank 1
 answered on 17 Feb 2019
3 answers
49 views

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 :)

Tsvetina
Telerik team
 answered on 19 Oct 2018
1 answer
340 views

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>
 
 
    <script src="https://code.jquery.com/jquery-1.12.4.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

Ivan Danchev
Telerik team
 answered on 12 Jun 2018
5 answers
196 views

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.

Dimiter Topalov
Telerik team
 answered on 23 May 2017
3 answers
158 views
I have a need for two panels on a page (left & right). I want different breakpoints for each one. Currently the styles that get generated will apply to all panels on the page. Can it be changed to generate styles that apply to the individual panels.
Dimo
Telerik team
 answered on 15 Jul 2015
2 answers
275 views

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

Stefan
Top achievements
Rank 1
 answered on 26 May 2015
1 answer
126 views

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 (.).

Atanas Georgiev
Telerik team
 answered on 16 Apr 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?