Responsive panel inconsistency

[jlchereau]

k-rpanel-toggle class should be able to designate a button to toggle the responsive panel and this button should behave consistently whether it is located in a kendo.ui.ToolBar or not.

Spend more than 5 min trying to understand the problem by running:

• http://dojo.telerik.com/UJEqA (correct beahaviour: the toggle button is hidden when width > breakpoint)
• http://dojo.telerik.com/EYeyi/5 (inconsistent behaviour: the toggle button is displayed and does nothing when width > breakpoint)

See #1289

[gyoshev]

Hello @jlchereau. As noted in the referenced issue, the behavior of the k-rpanel-toggle is overwritten by the toolbar responsive behavior. Even if the toggle button has higher specificity, this will break the ToolBar algorithm, which determines when to display buttons. We are open to suggestions on how to fix this problem, without letting either widget know of the other one.

[jlchereau]

@gyoshev Thank you for discussing this issue.

IMHO the purpose of a framework is not only to offer widgets but also and especially to offer a consistent set of widgets that integrates well. The responsive panel does not integrate well with the toolbar.

I agree that JS code dependency between widgets should be avoided but this can certainly be sorted out using CSS.

The workaround I have used involves Twitter Bootstrap hidden-* classes which works because I use a responsive panel breakpoint that corresponds to Bootstrap media queries (xs, sm, md, lg):

toolbar.kendoToolBar({
    items: [
       ...
        { type: 'buttonGroup', buttons: [{ id: INFO, text: culture.instructions.text, imageUrl: kendo.format(app.uris.cdn.icons, culture.instructions.icon), attributes: { 'class': 'k-rpanel-toggle hidden-md hidden-lg' }, togglable: true }] }
       ...
    ]
});

<div data-role="responsivepanel" class="k-widget k-content" data-orientation="right" data-breakpoint="992">

SOLUTION: So as to accomodate any breakpoint value, I suggest the responsive panel should simply add the css media query rule that hides the configured toggleButton when page width is above the breakpoint.

This should not be a problem since as documented the breakpoint refers to the page width, not the container width so media query rules apply.

It is simple and avoids any dependency between components. Note that the workaround works well for the instructions panel here below and there is no interference with the toolbar responsive behaviour: