CODEWITHSUNDEEP
twitter-bootstrap
r3wt
r3wt

Reputation: 4742

multiple bootstrap dropdown buttons in button group

Documentation doesn't specify how to specify target element for toggle. so having two dropdown buttons in a button group results in both dropdowns being toggled regardless of the button clicked. any ideas? I tried to use data-target to select the target but this just causes it to stop working entirely. I searched the documentation for a way to specify the target element to toggle but of course, it never mentions it in the documentation. 

<div class="btn-group master-btn">

    <button data-toggle="dropdown" data-target="#d1" class="btn dropdown-toggle btn-success">
        <i class="fa fa-plus"></i>
    </button>

    <ul class="dropdown-menu pull-left" id="d1">
        <li>
            <a href="">
                <span class="fa fa-pencil"></span> New Item
            </a>
        </li>
        <li>
            <a href="">
                <span class="fa fa-pencil"></span> Bulk Add
            </a> 
        </li>
        <li>
            <a href="">
                <span class="fa fa-pencil"></span> New Category
            </a>
        </li>
    </ul>

    <button data-toggle="dropdown" data-target="#d2" class="btn dropdown-toggle btn-primary">
        <i class="fa fa-cog"></i>
    </button>

    <ul class="dropdown-menu pull-left" id="d2">
        <li><a href="">Save as PDF</a></li>
    </ul>

</div>

Upvotes: 1

Views: 1512

Answers (1)

vanburen
vanburen

Reputation: 21663

Here's how you can make your own. Really just some minor CSS to make them look connected. See example.

.big-button-grp .btn-group.big-button button {
  border-radius: 0;
}
.big-button-grp .btn-group.big-button:not(:first-child) > button {
  border-left: none;
}
.big-button-grp .btn-group.big-button {
  margin-left: -5px;
  border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="big-button-grp">
    <div class="btn-group big-button">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action 1<span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action 1</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>

        </li>
      </ul>
    </div>
    <div class="btn-group big-button">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action 2 <span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action 2</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>

        </li>
      </ul>
    </div>
    <div class="btn-group big-button">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action 3 <span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action 3</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>

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

Upvotes: 3

Related Questions