CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
qLuke
qLuke

Reputation: 109

bootstrap drop down button aligns on the wrong side

When you click on the dropdown ul, the list items (<li>) are shown all the way to the left.. As you can see in my simplified jfiddle example: http://jsfiddle.net/3bfvvkbh/ 

<div> 

<div class="btn-group">
    <button type="button" class="btn btn-info">random button</button>
    <button type="button" class="btn btn-info">random button</button>
    <button type="button" class="btn btn-info">random button</button>
    <button type="button" class="btn btn-info">Action</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="d``ropdown" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

    </button>
    <ul id="yearlist" class="dropdown-menu" role="menu">
        <li> <a>2010</a>

        </li>
    </ul>
</div>

</div>


$(document).ready(function() {
$(function() {
var append = function( txt ) {
$("#yearlist").append( '<li>' + txt + '</li>' );
};
append("<a>2012</a>");
append("<a>2014</a>"); 
});
});

Upvotes: 0

Views: 1037

Answers (4)

Yash Barot
Yash Barot

Reputation: 21

Everything else is perfect but you just missed to take one extra btn-group to bind button and toggling menu

See: http://jsfiddle.net/3bfvvkbh/6/

$(document).ready(function () {
    $(function () {
        var append = function (txt) {
            $("#yearlist").append('<li>' + txt + '</li>');
        };
        append("<a>2012</a>");
        append("<a>2014</a>");
    });
});

Upvotes: -1

stanze
stanze

Reputation: 2480

Add this Class dropdown-menu-right in the UL tag, class="dropdown-menu dropdown-menu-right", Demo

<ul id="yearlist" class="dropdown-menu dropdown-menu-right" role="menu">
    <li> <a>2010</a>    
    </li>
</ul>

Upvotes: 1

Jako Basson
Jako Basson

Reputation: 1531

Instead of using the button tag like you're using in the example rather use a div with a .btn-group class.

<div class="btn-group">
    <a href="#" class="btn btn-default">Dropdown</a>
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></a>
    <ul class="dropdown-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>

http://jsfiddle.net/3bfvvkbh/2/

Upvotes: 0

KyorCode
KyorCode

Reputation: 1497

The dropdown has be in a seperate btn-group.

See my updated fiddle and also the Bootstrap Docs - #Nested Button groups

$(document).ready(function () {
    $(function () {
        var append = function (txt) {
            $("#yearlist").append('<li>' + txt + '</li>');
        };
        append("<a>2012</a>");
        append("<a>2014</a>");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <div class="btn-group">
        <button type="button" class="btn btn-info">random button</button>
        <button type="button" class="btn btn-info">random button</button>
        <button type="button" class="btn btn-info">random button</button>
        <div class="btn-group">
        <button type="button" class="btn btn-info">Action</button>
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

        </button>
        <ul id="yearlist" class="dropdown-menu" role="menu">
            <li> <a>2010</a>

            </li>
        </ul>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions