Telerik Forums
Kendo UI for jQuery Forum
1 answer
145 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
160 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
81 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
20 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
238 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
129 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
99 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
208 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
77 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
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?