How to make bootstrap dropdown always left aligned to the row

Question

using Bootstrap 3.3.4, I'm trying to have a list (or 'grid') with a dynamic number of 'Image Tiles' that each have a different set of options to display when clicked.

Here is what I have so far: https://jsfiddle.net/tzachary89/04meys2w/

(please ignore the silly images)

As you can see when you click each image, the dropdown is displayed correctly but it is aligned with the image that was clicked. Is it possible to have it left align with the row?

Here's some code because I have to:

   <div class="image-container  row" id="myContainer">
 <div class="dropdown">
   <div class="imageTile" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
      <div id="image-badge" style="position:absolute;margin-left:10px;display:none;" class="buttonCountBadge border border-dark rounded-circle badge badge-light">3</div>
      <img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg" />

  </div>


 <div  class="dropdown-menu image-dropdown-menu">
    <button class="btn gridButton btn-default" type="button">Neck</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Front - Left</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Front - Right</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Back - Left</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Back - Right</button>
    <button class="btn gridButton btn-default" type="button">Pectoris - Left</button>
    <button class="btn gridButton btn-default" type="button">Pectoris - Right</button>
    <button class="btn gridButton btn-default" type="button">Ribs - Left</button>
    <button class="btn gridButton btn-default" type="button">Ribs - Right</button>
    <button class="btn gridButton btn-default" type="button">Abdomen</button>
    <button class="btn gridButton btn-default" type="button">Back - Upper</button>
    <button class="btn gridButton btn-default" type="button">Back - Lower</button>
  </div>


</div>

Answer 1

Add this style

.dropdown.open {
    position: static;
}
.dropdown-menu.image-dropdown-menu {
  left: 25px !important;
  width: 98%;
  top: 180px;
}

Now the dropdown will always be absolute to the body instead of the relative parent container.

.image-container {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.imageTile {
  padding: 5px;
  max-width: 160px;
  max-height: 160px;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  max-height: 700px;
}

.image-dropdown-menu {
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  width: 100vw;
  left: 0;
  max-height: 700px;
  overflow: auto;
  padding: .5rem;
  margin-top: 5px;
  min-height: 160px;
}

.dropdown.open {
  display: flex !important;
}

.btn {
  margin-top: 10px;
}

.header {
  font-size: small;
  font-weight: 10;
}

.dropdown.open {
  position: static;
}

.dropdown-menu.image-dropdown-menu {
  left: 25px !important;
  width: 98%;
  top: 180px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="image-container  row" id="myContainer">
  <div class="dropdown">
    <div class="imageTile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <div id="image-badge" style="position:absolute;margin-left:10px;display:none;" class="buttonCountBadge border border-dark rounded-circle badge badge-light">3</div>
      <img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg" />

    </div>


    <div class="dropdown-menu image-dropdown-menu">
      <button class="btn gridButton btn-default" type="button">Neck</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Front - Left</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Front - Right</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Back - Left</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Back - Right</button>
      <button class="btn gridButton btn-default" type="button">Pectoris - Left</button>
      <button class="btn gridButton btn-default" type="button">Pectoris - Right</button>
      <button class="btn gridButton btn-default" type="button">Ribs - Left</button>
      <button class="btn gridButton btn-default" type="button">Ribs - Right</button>
      <button class="btn gridButton btn-default" type="button">Abdomen</button>
      <button class="btn gridButton btn-default" type="button">Back - Upper</button>
      <button class="btn gridButton btn-default" type="button">Back - Lower</button>
    </div>


  </div>






















  <div class="dropdown">
    <div class="imageTile" data-toggle="dropdown">
      <img src="https://cdn.athlonoutdoors.com/wp-content/uploads/sites/5/2015/02/Holstein-150x150.1511972782.jpg">
    </div>

    <div class="dropdown-menu image-dropdown-menu">

      <div class="row">
        <div class="offset-md-3 offset-3 offset-sm-3 col-1 col-sm-1 col-md-1 header">Slight Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Moderate Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Extreme Pain</div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3 ">Hip - Left</div>
        <div class="col-md-1 col-sm-1 ">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Hip - Right</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Groin</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>
    </div>




  </div>


























  <div class="dropdown">
    <div class="imageTile" data-toggle="dropdown">
      <img src="https://cdn.athlonoutdoors.com/wp-content/uploads/sites/5/2015/02/Holstein-150x150.1511972782.jpg">
    </div>

    <div class="dropdown-menu image-dropdown-menu">

      <div class="row">
        <div class="offset-md-3 offset-3 offset-sm-3 col-1 col-sm-1 col-md-1 header">Slight Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Moderate Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Extreme Pain</div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3 ">Hip - Left</div>
        <div class="col-md-1 col-sm-1 ">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Hip - Right</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Groin</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>
    </div>




  </div>




















  <div>
    <div class="imageTile" data-toggle="dropdown" href="#">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">

      <div id="dropdown4" class="dropdown-menu image-dropdown-menu remove-padding">

        <div class="row">
          <div class="offset-md-3 col-sm-1 col-md-1 header">Slight Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Moderate Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Extreme Pain</div>
        </div>



        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Head</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>


        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Some long label as an example</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>



        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Eyes</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>



        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Ears</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>




      </div>
    </div>
  </div>















  <div>
    <div class="imageTile" data-toggle="dropdown" href="#">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
      <div id="dropdown4" class="dropdown-menu image-dropdown-menu remove-padding">

        <div class="row">
          <div class="offset-md-3 col-sm-1 col-md-1 header">Slight Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Moderate Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Extreme Pain</div>
        </div>



        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Hip - Left</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>




        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Hip - Right</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>

        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Groin</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>

        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Buttocks - Left</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>


        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Buttocks - Right</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>

      </div>
    </div>
  </div>





  <div>
    <div class="imageTile">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
    </div>
  </div>


  <div>
    <div class="imageTile">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
    </div>
  </div>

  <div>
    <div class="imageTile">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
    </div>
  </div>


</div>
<script>
  $(document).ready(function() {
    $('.dropdown-menu').click(function(e) {
      e.stopPropagation();
    });

    $('.image-container').on('hide.bs.dropdown', function(e) {
      $(e.relatedTarget).removeClass('selected').css("border", "0px");
    });


    $(".imageTile").click(function() {
      var selected = $(this).hasClass("selected");

      var container = $(this).parents(".image-container:first");
      $(".imageTile", container).removeClass("selected").css("border", "0px");

      if (!selected) {
        $(this).addClass("selected").css("border", "1px solid blue");
      }
    });

    $(".gridButton").click(function() {
      console.log("\n\n\n\n\n");

      var badge = $(this).parent().parent().closest("div").find('.buttonCountBadge:first');

      $(this).toggleClass('btn-default btn-primary');
      var count = $(this).closest("div").find('.btn-primary').length;

      console.log("Count: " + count);

      if (count != null && count > 0) {
        badge.show();
        badge.html(count);
      } else {
        badge.html(0);
        badge.hide();
      }
    });
  });
</script>