Why does the panel width change?

2 posts, 0 answers
  1. Barry P
    Barry P avatar
    20 posts
    Member since:
    Aug 2006

    Posted 08 Jun 2018 Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1782 posts

    Posted 12 Jun 2018 Link to this post

    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:
    <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.
Back to Top