This is a migrated thread and some comments may be shown as answers.

Why does the panel width change?

1 Answer 349 Views

ResponsivePanel

This is a migrated thread and some comments may be shown as answers.

Barry P asked on 08 Jun 2018, 07:48 PM

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>

<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

Why does the panel width change?

1 Answer, 1 is accepted