Bootstrap Button Dropdowns - Creating overflow

Question

I am trying to create an "Actions" dropdown on the last column of a table, But I am getting an overflow appearing when you click the dropdown. (See attached screenshot)

enter image description here

My HTML is structured as follows :

<table id="app_progress" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>In Build</th>
                        <th>Signed off</th>
                        <th>In deployment Apple</th>
                        <th>In deployment Android</th>
                        <th>In review Apple</th>
                        <th>In review Android</th>
                        <th>Live Apple</th>
                        <th>Live Android</th>
                        <th>Paid</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--for loop here that will create a TR all content in the TD based on whats passed in.-->

                    <tr>
                        <!--td>523</td-->
                        <td><a href="#" class="view-form-a">Primary</a></td>
                        <!-- in_build column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- signed_off column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- paid column -->
                                                                            <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
                                                                        <!-- view app column -->
                        <td>
                            <div class="btn-group open">
                                <button aria-expanded="true" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">
                                    Action <span class="caret"></span>
                                </button>
                                <ul role="menu" 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>
                        </td>
                    </tr>
                     <!--End of If statement-->

                    <tr>
                        <!--td>99786</td-->
                        <td><a href="#" class="view-form-a">Primary School</a></td>
                        <!-- in_build column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- signed_off column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- paid column -->
                                                                            <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
                                                                        <!-- view app column -->
                        <td>
                            <div class="btn-group">
                                <button aria-expanded="false" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">
                                    Action <span class="caret"></span>
                                </button>
                                <ul role="menu" 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>
                        </td>
                    </tr>
                     <!--End of If statement-->
                    <!--everything goes within the loop-->
                    </tbody>
                </table>

How can I get rid of the overflow?

Thanks

just a quick shot in a dark applying table-layout:fixed to your table either in your #app_progress or .table / .table-stripped? — dippas
– dippas, Commented Jan 27, 2015 at 12:41
@NatalieHedström I don't have an CSS as of yet, I am using Bootstrap's CSS — StuBlackett
– StuBlackett, Commented Jan 27, 2015 at 12:43
What element is the table contained in? Seems to work fine here: bootply.com/AZuKMVoZy2 — Carol Skelly
– Carol Skelly, Commented Jan 27, 2015 at 12:49
Hi @Skelly the only difference I can see there is I'm not using container, I use "container-fluid" also worth noting I am using : maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js — StuBlackett
– StuBlackett, Commented Jan 27, 2015 at 13:26

tao · Accepted Answer · 2015-01-27 13:08:40Z

2

Add dropdown-menu-right class to ul.dropdown-menu and it will align to the right side of the button, therefore expanding towards left.

answered Jan 27, 2015 at 13:08

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Mehta · Accepted Answer · 2016-01-05 05:07:40Z

$('.mydropdown').on('shown.bs.dropdown', function(e) {
  var myBtn = $(this);
  var offset_t = $(this).offset().top - $(window).scrollTop();
  var offset_l = $(this).offset().left - $(window).scrollLeft();

  console.log(offset_l, offset_t);
  myBtn.find(".dropdown-menu").css({
    "position": "fixed",
    "left": offset_l,
    "top": offset_t + myBtn.height()
  });
});
$('.mydropdown').on('hidden.bs.dropdown', function() {
  var myBtn = $(this);
  myBtn.find(".dropdown-menu").removeAttr("style");
});


$("#wrap").on("scroll", function(e) {
  var myBtn = $('.mydropdown.open');

  var offset_t = $(myBtn).offset().top - $(window).scrollTop();
  var offset_l = $(myBtn).offset().left - $(window).scrollLeft();

  myBtn.find(".dropdown-menu").css({
    "position": "fixed",
    "left": offset_l,
    "top": offset_t + myBtn.height()
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div style="width:850px; overflow: scroll;height:450px;" id="wrap">
  <table class="table table-striped table-bordered table-hover" id="example" ccellpadding="0" cellspacing="0" border="0" width="100%">
    <thead>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
        <th>Head3</th>
        <th>Head4</th>
        <th>Head5</th>
        <th>Head6</th>
        <th>Head7</th>
        <th>Head8</th>
      </tr>
    </thead>
    <tbody>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

overflow:scroll - The overflow is clipped, but a scroll-bar is added to see the rest of the content.

if you need overflow:scroll compulsory. you have add position fixed to dropdown-menu using jquery.

Collectives™ on Stack Overflow

Bootstrap Button Dropdowns - Creating overflow

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related