Drawer Issue with Bootstrap

[David]

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

[Kiril Nikolov]

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

 

 

[David]

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.

[Kiril Nikolov]

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

 

 

[David]

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>

[Kiril Nikolov]

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

 

 

[David]

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?

[David]

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.

[Kiril Nikolov]

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