clineamb/bootstrap-drawer

A Bootstrapadd-on to create off-canvas styled navigation

yo, clineamb / knilly here

• principal software engineer by day
• twitch streamer by night
• ttrpg creative
• gamer all day
• fancies herself a game designer wanna-be developer

🎮 twitch.tv/knillyline

🐦 twitter.com/clineamb

📷 instagram.com/clineamb

⌚ tiktok.com/@knillyline

bootstrap-drawer's Issues

Right hand docking?

Hi Caroline,

Great little plugin. Thanks for making it available. Is there any way to get the drawer to slide out from the right instead of the left? And have the button in the right?

Support for Sass

Would be nice to have support for Sass when using https://github.com/twbs/bootstrap-sass

Bootstrap 4 will be using sass so using BS3 with SASS will make a smoother transition for most projects.

bug in .drawer-heading class

consider a html drawer code like below:
`

    <div class="drawer-contents">
        <div class="drawer-heading">
            <h2 class="drawer-title"><strong>Application settings</strong></h2>
        </div>

        <div class="drawer-heading">
            <h3 class="drawer-title">background</h3>
        </div>

        <div class="drawer-body">
                <a class="col-sm-4"  style="background: rgb(185, 140, 51)  none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;">
                </a>
                <a class="col-sm-4"style="background: rgb(177, 60, 75) none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(43, 115, 177)')" style="background: rgb(43, 115, 177) none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(11, 135, 140)')" style="background: rgb(11, 135, 140)   none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(177, 60, 60)')" style="background: rgb(177, 60, 60)  none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(29, 155, 88)')" style="background: rgb(29, 155, 88) ;width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                                <a class="col-sm-4" ng-click="select_background('rgb(16, 117, 113)')" style="background: rgb(16, 117, 113)  none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;">
                </a>
                <a class="col-sm-4" ng-click="select_background('rgb(107, 28, 38)')" style="background: rgb(107, 28, 38) none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(43, 177, 101)')" style="background: rgb(43, 177, 101)  none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(34, 140, 121)')" style="background: rgb(34, 140, 121)   none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(153, 56, 56)')" style="background: rgb(153, 56, 56) none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(97, 171, 59) ')" style="background: rgb(97, 171, 59)  ;width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>

                <a class="col-sm-4" ng-click="remove_background_color()" style="display: inline-block;cursor: pointer;"> حذف رنگ پس زمینه</a>
        </div>


        <div class="drawer-heading">
            <h3 class="drawer-title">بک گراند</h3>
        </div>

        <div>
                <a class="col-sm-4" ng-click="select_background('rgb(185, 140, 51)')" style="background: rgb(185, 140, 51)  none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;">
                </a>
                <a class="col-sm-4" style="background: rgb(177, 60, 75) none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(43, 115, 177)')" style="background: rgb(43, 115, 177) none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(11, 135, 140)')" style="background: rgb(11, 135, 140)   none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(177, 60, 60)')" style="background: rgb(177, 60, 60)  none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(29, 155, 88)')" style="background: rgb(29, 155, 88) ;width: 33%; height: 70px;display: inline-block;cursor: pointer;">hh </a>
                                <a class="col-sm-4" ng-click="select_background('rgb(16, 117, 113)')" style="background: rgb(16, 117, 113)  none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;">
                </a>
                <a class="col-sm-4" ng-click="select_background('rgb(107, 28, 38)')" style="background: rgb(107, 28, 38) none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(43, 177, 101)')" style="background: rgb(43, 177, 101)  none repeat scroll 0% 0%; width: 33%; height: 70px; display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(34, 140, 121)')" style="background: rgb(34, 140, 121)   none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(153, 56, 56)')" style="background: rgb(153, 56, 56) none repeat scroll 0% 0%; width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>
                <a class="col-sm-4" ng-click="select_background('rgb(97, 171, 59) ')" style="background: rgb(97, 171, 59)  ;width: 33%; height: 70px;display: inline-block;cursor: pointer;"> </a>

                <a class="col-sm-4" ng-click="remove_background_color()" style="display: inline-block;cursor: pointer;"> حذف رنگ پس زمینه</a>
        </div>

    </div>
    <div class="drawer-controls" style="height: auto !important; bottom: 80px;">
        <a id="doDrawer" aria-expanded="true" href="#docDrawer" data-toggle="drawer" aria-foldedopen="false" aria-controls="docDrawer" class="btn btn-default"><span class="glyphicon glyphicon-cog"></span></a>
    </div>
</div>`

sections with 'drawer-heading' class cover top sections and make disable them.

a solution is:

.drawer-heading{
     display: inline-block;
}

Top or bottom draw?

Left and right is good but how about top and bottom? is this possible ?

.drawer-controls with height=100% is a bug

As you could in the screenshot, drawer contorls disable most left buttons in the table

i think it is better to remove height from .drawer-controls:

.drawer-controls {
   /* height: 100%; */
}

Add to cdn?

any chance you could submit the repo to cdnjs? Here's a somewhat pre-filled link to the submission form if you feel so inclined. Makes playing with the lib easier on codepen.io

https://github.com/cdnjs/cdnjs/issues/new?title=%5BRequest%5D%20Add%20_library_name_%20&body=**Library%20name%3A**%20%0A**Git%20repository%20url%3A**%0A**npm%20package%20url(optional)%3A**%20%0A**License(s)%3A**%0A**Official%20homepage%3A**%0A**Wanna%20say%20something?%20Leave%20message%20here%3A**%0A%0A%0A%0A=====================%0ANotes%20from%20cdnjs%20maintainer%3A%0AYou%20are%20welcome%20to%20add%20a%20library%20via%20sending%20pull%20request%2C%0Ait%27ll%20be%20faster%20then%20just%20opening%20a%20request%20issue%2C%0Aand%20please%20don%27t%20forget%20to%20read%20the%20guidelines%20for%20contributing%2C%20thanks!!

drawer.min.js not found

Hi,
Inside the index.html there is a reference to drawer.min.js but I am not ablet to find out.
What's wrong?

Best regards & thanks for sharing it!

close on click outside drawer

Hi,

not sure if this is an issue or a feature request;-) Anyway, considering the way I'd like to use drawer one could call it an issue:-)

Closing drawers when clicking/tapping outside the drawer(s) doesn't seem to work. Is this 'works as designed'? Or am I missing something?

Grtz,

Patrick

btw. check http://beebuy.nl to see my drawer implementation (vind menu and when logged in the user menu)

Right side drawer

Is it possible to have a drawer slide open from the right side, rather than left?

Toggle drawer

jquery "on" binder to click with $(".drawer").drawer("hide")
On the first click in the container the drawer is shown

Nav Drawer not working

I tried to work on your example.html but was unable to make it work.I know ,I may have commited the mistake but dont know what went wrong(as am new to this).Please help me out.

The drawer content is hidden but when i try to click on < a> tag (menu),it does nothing.

<head>
    <!--<script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>-->
    <link rel='stylesheet' href='webjars/bootstrap/3.3.5/css/bootstrap.css'>
    <link href="plugins/Drawer/css/bootstrap-drawer.css" rel="stylesheet" type="text/css"/>
    <link href="plugins/Drawer/css/bootstrap-drawer.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="webjars/bootstrap/3.3.5/js/transition.js"></script>
    <script src="plugins/Drawer/js/drawer.js" type="text/javascript"></script>
    <script>
       ($('.drawer').drawer());
    </script>  
    <link href="plugins/Drawer/example/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="plugins/Drawer/example/highlight.pack.js" type="text/javascript"></script>

</head>

<body class="has-drawer"> <!-- add this class to your body for proper sizing -->
    <div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
        <div class="drawer-controls">
            <a  data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
        </div>
        <div class="drawer-contents">
            <div class="drawer-heading">
                <h2 class="drawer-title">Menu</h2>
            </div>
            <div class="drawer-body">
                <p>
                    This is a properly padded container for content in the
                    drawer that isn't a navigation.
                </p>
                <a href="#">A Regular Link</a>
            </div>
            <ul class="drawer-nav">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
            <div class="drawer-footer">
                <small>&copy; Caroline Amaba</small>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- content as per usual -->
    </div>
</body>

Also,it shows "aria-foldedopen" not allowed on "a" at this point.

identify which bootstrap.js files are needed for this

I assume this doesn't actually require all of bootstrap's JS. It would be great if the docs identified what are the minimal set of JS files are needed to use this.

Conflicts With Bootstrap Drowdown

This conflicts with the Bootstrap Drop down ability, so only a single layered navigation is possible.

documentation / demo question

I'm having a little troubles with the nested container drawer.

I'm seeing in this documentation page for #drawerExample2 that there is an aria- tag that looks mal-formed:
aria-foldedopen"false"

It literally appears as shown above, a value-pair smushed together without an 'equal' sign in between them.

Is this aria- tag required when implementing?

<a> tag for drawer button forces page navigation

I'm trying to use the drawer as a slide-out menu in an Angular powered single-page app.

This tag however forces the page to navigate

<a href="#drawerExample" data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-info btn-sm btn-raised">Menu</a>

Can this be customized to a instead?

thank you

Bootstrap 4

With Bootstrap 4 to be released within weeks will this plugin be updated to bootstrap 4 and SASS?

Right hand docking?

Hi Caroline,

Great little plugin. Thanks for making it available. I want to use the right aligned option and have run into a small issue. In the screenshots attached:

• Above red line is Firefox 46.0.1
• Below red line is Chrome 50.0.2661.102 m

In both cases the words in the button namely "Special Characters" is not fully displayed. Also it is worth noting that even when there is no vertical scrollbar the same behaviour is in evidence.

What CSS do I have to tweak to get the button to display correctly?

Also a nice feature addition would be to allow the button to be positioned vertically within the browser window. In my case I would prefer to have the button right aligned but in the middle of the display vertically, so that it was not stuck top right as it is now because that is too far away from my content.

drawer-inside & drawer-right causing drawer-controls wrong scale

When using a nested drawer, the drawer controls width does not scale correctly in accordance to the panel the drawer is nested in. This doesn't show normally when the controls are left-aligned, however, if the controls are right aligned using the "drawer-right" class, the menu button will shift over the bounds of the panel, causing it to be only half visible if the panel doesn't fill the whole page.

Reproduction:

• create a row
• create a col-lg-6 inside
• create a panel inside the col-lg-6
• create a drawer inside the panel-body
• assign classes 'drawer drawer-right drawer-inside dw-xs-5 fold' to the drawer
• the menu button of the drawer will not be fully visible

Example: https://codepen.io/Dinkelborg/pen/owOQWZ

Version problem on npm

Hello @clineamb ,
I am the member of cdnjs project.
We want to host this library.
I saw the latest version 1.0.5 on npm, but the version in dist/js/drawer.js shows v1.0.3.
Please help us confirm that.
Thanks very much!

cdnjs/cdnjs#7350
cdnjs/cdnjs#7950

Multiple Drawers Overlap

I'm trying to use this with my site and have created three separate drawers but if one drawer is opened and I click on another drawer nav link the one below doesn't close.

Is there a way a drawer retract back/close when a new one is clicked?

Keyboard hiding the input field in android devices

Hello

Behavior in Android Browser:

Steps to reproduce:

1. Add forms (text field) within the drawer
2. Scroll down to the form and focus the input field
3. Notice that OSK comes up and it covers the input field. Input field is only visible after some test is committed to the field.

Note that the issue is likely caused only in Andriod devices. If drawer is loaded directly in IOS OSK behaves correctly.

Also note that the problem reproducible with Content Shell as well (and not just with Chrome).

Expected result:
Input field is positioned so that the OSK does not cover it.

Actual result:
OSK covers the input field.

Kindly Help.

dw-xs-2 not showing content

Hi, first of all great work, i appreciate the efforts.
I was trying to implement the plugin and everything was fine, but at the smaller sizes, i ran into trouble

1. at any sizes smaller than dw-xs-4 the body wont show nor the content divs.
   I pasted my code below,
   what DID show up was marked at size xs-2,
   my idea was that this might be a place to put some fa-icon only nav list right below the drawNav id / main draw component and use a class to hide this content if dw-xs-4 or larger is used.

hope you can direct me.
thanks,
mj

  <div id="drawerNav" class="drawer dw-xs-2 dw-sm-1 dw-md-3 dw-lg-2 fold  " aria-labelledby="drawerNav">
        <h1> sfsdfsd</h1>
        <ol>
  <li>Coffee show up</li>
  <li>Tea show up</li>
  <li>Milk show up</li>
</ol>

<ul>
  <li>Coffeeshow up</li>
  <li>Tea show up</li>
  <li>Milk show up</li>
</ul>
        <i class="fa fa-times" aria-hidden="true"></i>
       <!--
        
        <div class="xdrawer-controls">
            <a href="#drawerExample" data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
        </div>
        -->
        
        <div class="drawer-controls">
            <a href="#drawerNav" data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerNav" class="btn btn-default folded" aria-expanded="false">
            <i class="fa fa-align-justify"></i></a>
        </div>
        
         I am the draw body I show up
        
        <div class="drawer-contents">
            sfsdfsd
             <strong href="#">A Regular Link</strong>
                    <div class="drawer-heading" style="margin-right:0px;text-align:right;">
                       <!--<h2 class="drawer-title">Menu hello</h2>-->
                     
                        <!--SOME HEADING-->
                     
                          <a style="" class="navbar-brand"  href="<?php echo site_url('jobs') ?>">             
                              <span class="" style="font-size:1.0em; color:#428bca;"><span style="z-index:9999;border-bottom: solid 1px #428bca !important;" class="glyphicon  slk3 glyphicon-signal " aria-hidden="true"></span> Job Lister&nbsp;&nbsp; 
                              </span>
                            </a>
                           
                    </div>
            
            
            
                    <!--SOME BODY-->            
                    <div class="drawer-body" style="">
                     I am the draw bvody
                        <p>
                            This is a properly padded container for content in the
                            drawer that isn't a navigation.
                        </p>
                        <a href="#">A Regular Link</a>
                     
                    </div>
            
            
            
                    <!--.drawer-fullnav drawer-nav-->
            
                    <ul class="drawer-nav" style="padding:0px;margin-left:0px;text-align:right;">
                    
                      <ul class="drawer-nav" style="padding:0px; margin:0px;text-align:right;">
                        <li role="presentation" class="active"><a class="" style="margin-left:0px;text-align:right;" href="#">Link</a></li>
                        <li role="presentation"><a class="btn-well btn btn-default" href="#">Link</a></li>
                        <li role="presentation"><a href="#">Link</a></li>
                    
                   
                        <li role="presentation"><a href="#">Profile</a></li>
                        <li role="presentation"><a href="#">Messages</a></li>
                    </ul>
                 

                    <div class="drawer-footer ">
                        <small>&copy; some comp</small>
                    </div>



        </div> <!--draw contentes end-->
    </div>

Deactivate Background If Open?

I did not see anything relevant to that. Is there any way to deactivate for touching or clicking on background while drawer is open? Or is it not supported yet?

Duplicate href

Example file index.html has duplicate href="#drawerExample" attribute on button. Also duplicate in example on website.

Push Behaviour

Hi, does anyone know if the bootstrap-drawer supports push behaviour instead of overlay?

Drawer won't hide

Using the default examples, I am unable to get the drawer to hide.

Standard data-toggle wont let me hide the menu and neither will calling $("#drawerExample").drawer('hide')

Attempting to hide the drawer manually returns my drawer dom object as a result.

Using Chrome 42 on Windows.

Any tips on where to start looking to debug?

Transition not working!

Hi!

Maybe i'm missing some libraries, but using bootstrap 4 min css and js libs + yours bootstrap drawer libs are not making transitions happen when clicking on link with ref or button with data-toggle.

I created a JSFiddle showing my problem....

https://jsfiddle.net/gvalencise/2p64wg15/1/

Could you help me backtrace where am i missing something ?