search

soundasleep / jquery-dropdown

Bootstrap-style dropdowns with some added features and no dependencies.
Other
767 stars 268 forks source link

Doesn't work within Bootstrap 3 #80

Closed SarahSlythe closed 9 years ago

SarahSlythe commented 9 years ago

I think there is a conflict when running within Bootstrap 3. Is there a way to make it work?

Thanks!

claviska commented 9 years ago

The demo uses Bootstrap 3, but there was a recent PR for changing the namespace. Worked fine though. Need to see a minimal case to troubleshoot. 

— Cory LaViska

A Beautiful Site, LLC

www.abeautifulsite.net

On Tue, Apr 14, 2015 at 6:34 PM, SarahSlythe notifications@github.com wrote:

I think there is a conflict when running within Bootstrap 3. Is there a way to make it work?

Thanks!

Reply to this email directly or view it on GitHub: https://github.com/claviska/jquery-dropdown/issues/80

SarahSlythe commented 9 years ago

Hi Cory...here's what I did:

<script src="jquery-2.1.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="jquery-dropdown-master/jquery.dropdown.min.css">
<script src="jquery-dropdown-master/jquery.dropdown.min.js"></script>

<a href="#" data-dropdown="#dropdown-1" class="label label-primary">dropdown</a>
<div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
        <li><a href="1">Item 1</a></li>
        <li><a href="2">Item 2</a></li>
        <li><a href="3">Item 3</a></li>
        <li class="dropdown-divider"></li>
        <li><a href="4">Item 4</a></li>
        <li><a href="5">Item 5</a></li>
        <li><a href="6">Item 6</a></li>
    </ul>
</div>

I do not get the dropdown with this. The display stays at 'none'.

ghost commented 9 years ago

The new class names are "jq-dropdown jq-dropdown-tip", "jq-dropdown-menu" and "jq-dropdown-divider" assuming you grabbed the project within the last 7 days.

For example (copied from the current index.html):

<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
        <ul class="jq-dropdown-menu">
            <li><a href="#1">Item 1</a></li>
            <li><a href="#2">Item 2</a></li>
            <li><a href="#3">Item 3</a></li>
            <li class="jq-dropdown-divider"></li>
            <li><a href="#4">Item 4</a></li>
            <li><a href="#5">Item 5</a></li>
            <li><a href="#5">Item 6</a></li>
        </ul>
    </div>