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 !
1 Answer, 1 is accepted
In general, the ResponsivePanel dynamically inserts a <style> tag in the document <head> that is utilizing media queries to show/hide the related content. Taking this into consideration, in order to dynamically change the breakpoint option, I would suggest the following approach:
- Remove the related style tag from the <head>.
- Use the setOptions() method to set the new breakpoint.
- Register the new breakpoint media query through the _registerBreakpoint() method.
I have prepared a Dojo example that demonstrates the above approach. Not that, it might be viable to further enhance the logic for deleting the <style> tag in order to make sure that the correct element is being removed.
Regards,Dimitar
Progress Telerik