Drawer Issue with Bootstrap

9 posts, 0 answers
  1. David
    David avatar
    5 posts
    Member since:
    Mar 2015

    Posted 12 Mar 2015 Link to this post

    I am trying to create a responsive web page using a Drawer as my left nav bar.  However, whenever the drawer opens, it pushes the content all the way off the page, to the exact width of the page.  I discovered that this occurs when I include the bootstrap stylesheets:

    <link rel="stylesheet" href="vendor/bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.bootstrap.min.css" />

    How can I use a drawer and use bootstrap?

    Thanks!

    P.S. I am a newbie to Kendo UI
  2.
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 16 Mar 2015 Link to this post

    Hello David,

     

    I have tried to reproduce the issue in the following example, but to no avail. Can you please check it out and let me know what I missed?

    http://dojo.telerik.com/eFUYe

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. David
    David avatar
    5 posts
    Member since:
    Mar 2015

    Posted 16 Mar 2015 in reply to Kiril Nikolov Link to this post

    The Drawer works in your demo but all of the bootstrap responsive formatting is lost.  I started with the demo on your site for using kendo alongside twitter bootstrap (http://demos.telerik.com/kendo-ui/bootstrap/).  If I use the stylesheets from that demo, the bootstrap works but the drawer does not.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 18 Mar 2015 Link to this post

    Hello David,

    Can you please edit the demo that I shared in order to show the issue that you are facing, as we are trying to reproduce the problem, but to no avail? So please edit it in order for us to see the issue and advise you further.

    Thanks for the cooperation.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. David
    David avatar
    5 posts
    Member since:
    Mar 2015

    Posted 18 Mar 2015 in reply to Kiril Nikolov Link to this post

    If you take that exact demo from your link but replace the top link/script section with the ones from your bootstrap demo (see below).  The other change is in .demo-section{}.  The only way to see the demo section with the drawer opened was to make the width 100%, but then you will see how it gets pushed all the way off screen to the right.

          .demo-section {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 270px;
            padding: 0;
          }

    <link rel="stylesheet" href="vendor/bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.bootstrap.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.timezones.min.js"></script>


  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 19 Mar 2015 Link to this post

    Hello David,

     

    This is because you are missing the kendo.default.mobile.min.css file. Here is the updated example:

     

    http://dojo.telerik.com/eFUYe/3

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. David
    David avatar
    5 posts
    Member since:
    Mar 2015

    Posted 19 Mar 2015 in reply to Kiril Nikolov Link to this post

    Thank you, Kiril - that was the missing piece!  One last question:  I was planning to use the Drawer as a left nav bar in a responsive site, and when the screen is large (wide), I wanted the Drawer to remain open and act like a permanent left nav bar.  My problem is that the Drawer, as intended, pushes the main screen off to the right.  Are you aware of a way so that the bootstrap formatting shifts to take into account the extra width from the Drawer?
  14.
  15. David
    David avatar
    5 posts
    Member since:
    Mar 2015

    Posted 19 Mar 2015 in reply to David Link to this post

    Actually I wonder now if the Responsive Panel is what I am really looking for (didn't know of it before), though I have the same kind of problem trying to find the correct list of links/styles to have it work alongside bootstrap.  If I copy the list I used with the Drawer/bootstrap project, the Responsive Panel stops working.
  17. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 21 Mar 2015 Link to this post

    Hello David,

    The Drawer will not take in account Bootstrap formatting and it is not intended for use a left NavBar its is a Drawer menu.

    The responsive panel was released a few days ago, with the 2015.1.xxx version, so if you wanto to use it you will need to upgrade to the latest version.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top