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

Drawer Issue with Bootstrap

8 Answers 165 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 12 Mar 2015, 08:32 PM
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

8 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 16 Mar 2015, 11:34 AM

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!
 
0
David
Top achievements
Rank 1
answered on 16 Mar 2015, 01:19 PM
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.
0
Kiril Nikolov
Telerik team
answered on 18 Mar 2015, 08:55 AM

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!
 
0
David
Top achievements
Rank 1
answered on 18 Mar 2015, 01:59 PM
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>


0
Kiril Nikolov
Telerik team
answered on 19 Mar 2015, 08:34 AM

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!
 
0
David
Top achievements
Rank 1
answered on 19 Mar 2015, 12:58 PM
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?
0
David
Top achievements
Rank 1
answered on 19 Mar 2015, 09:17 PM
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.
0
Kiril Nikolov
Telerik team
answered on 21 Mar 2015, 07:35 AM

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!
 
Tags
Drawer (Mobile)
Asked by
David
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
David
Top achievements
Rank 1
Share this question
or