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

3 votes140 views1 answer
Svg namespace uri
Html
0 vote159 views2 answers
Html legend tag
Html
9 votes98 views2 answers
Import google fonts
Html
0 vote146 views1 answer
Mobile screen ful width not get in html 5
Html
-4 votes159 views6 answers
Heading in html
Html
0 vote173 views1 answer
Javascri
Html
0 vote128 views2 answers
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Html
1 vote131 views1 answer
How to display the first frame of the video element in html
Html
0 vote258 views1 answer
How to change db cred in wordpress
Html
3 votes137 views1 answer
Modal by clicking button
Html