Bootstrap dropdown in table

<div class='position-relative'>
...
  <td>
  <!-- Make sure position is static -->
  <div class="dropdown position-static actions d-inline-block">
      <button class="btn btn-light px-1 py-0 mt-1 dropdown-toggle actions-btn" type="button"
          id="table-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="mdi mdi-dots-horizontal"></i>
      </button>
      <div class="dropdown-menu" aria-labelledby="table-action">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
      </div>
  </div>
</td>
...
</div>

<script>
    $(function() {
        $('.actions').on('shown.bs.dropdown', function(e) {
            let menu = $(this).find('.dropdown-menu');
            let parent = $(this).parents('td').position().top;
            let top = $(this).position().top;
            let height = $(this).height();
            
            top = (top + parent);

            $("head").append('<style type="text/css" id="new-style"></style>');

            var newStyleElement = $("head").children('#new-style');
            newStyleElement.html('.dropdown-menu[x-placement^="left"],' +
                '.dropdown-menu[x-placement ^= "right"],' +
                '.dropdown-menu[x-placement ^= "top"] {' +
                'top:' + (top + height) + 'px !important;' +
                '}'
            );

            $('.actions').on('hide.bs.dropdown', function() {
                $("head").children('#new-style').remove();
            });
        })
    });

</script>

Similar codes

28 votes327 views3 answers
Html a href
Html
5 votes294 views2 answers
Html disable drag image
Html
41 votes349 views6 answers
Html text next line
Html
1 vote322 views1 answer
Difference between first of type and first child
Html
4 votes328 views1 answer
Html input autofocus
Html
8 votes316 views2 answers
Html rupee symbol
Html
0 vote373 views1 answer
Shubham Narayan More Html Notes
Html
0 vote326 views1 answer
Apache serve json
Html
0 vote337 views1 answer
Thymeleaf form delete method
Html
6 votes316 views1 answer
\r in html
Html