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
1 Answer, 1 is accepted
0
Hello Barry,
Kendo UI applies default min-width (320px) to left and right panel elements, which causes the difference in width between top and left/right panels. You can override this default style with the following CSS rule:
Updated dojo example with the CSS above included.
Regards,
Ivan Danchev
Progress Telerik
Kendo UI applies default min-width (320px) to left and right panel elements, which causes the difference in width between top and left/right panels. You can override this default style with the following CSS rule:
<style> .k-rpanel-left, .k-rpanel-right { min-width: 0px; }</style>Updated dojo example with the CSS above included.
Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.