Bootstrap dropdowns and other components don't work in the side menu (Sidr plugin)

Question

I'm trying to use dropdown inside the side menu. The side menu is implemented using the jQuery plugin called Sidr

You can see it on jsfiddle

The side menu and content page

I expect the dropdown inside the side menu to be like in the image below. In fact when I place the code outside of the side menu it works (correct styles are applyed and it can be opened and closed).

The working dropdown (outside the side menu)

But when the same code placed inside the side menu it looks like the bootstrap styles and jquery are not working properly. I can't figure out why it's happening.

Not working dropdown (inside the side menu)

HTML

    <!-- Link to open the side menu -->
    <a class="navbar-brand" href="#left-menu">Open</a>
    <!-- The side menu itself -->
    <div class="nav-collapse collapse">
        <div class="container">               
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>

JavaScript

jQuery(document).ready(function ($) {    
    $('.navbar-brand').sidr({
        name: 'sidr-left',
        side: 'left', 
        source: '.nav-collapse'
    });
    //this code is close sidr menu if clicked outside
    $(document).bind("click", function () {
        $.sidr('close', 'sidr-left');
    });
});

CSS

.sidr
{
    background: #f8f8f8;
    color: #333;
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    position: fixed;
    top: 0;
    width: 260px;
    z-index: 999999;
    box-shadow: 0px 2px 1px #777;
}
.sidr .sidr-inner
{
    padding:15px;
}
.sidr.left
{
    left: -260px;
    right: auto;
}

How to make it recognize bootstrap components and its functionality?

I include /css/bootstrap.css to the html file that's why when I put that code outside the div.nav-collapse it works — Alexey, Mar 01 '15 at 08:43
I tried to make snippet using your code but it does not work. I think something is missing in this code you wrote here. — Lafontein, Mar 02 '15 at 10:19
I added jsfiddle and pic with dropdowns inside the side menu(strange rendering) and outside it(working dropdown) — Alexey, Mar 02 '15 at 10:50

score 0 · Accepted Answer · answered Mar 02 '15 at 16:45

0

To avoid overriding the bootstrap functionality the property renaming: false should be added

$('.navbar-brand').sidr({
    name: 'sidr-left',
    side: 'left', 
    source: '.nav-collapse',
    renaming: false//<--
});

Jsfiddle

answered Mar 02 '15 at 16:45

Alexey

7,127
9
57
94

Bootstrap dropdowns and other components don't work in the side menu (Sidr plugin)

1 Answers1