Search code examples

Bootstrap dropdown button list hidden and full with

Hello guys I tried to implement an html table cell dropdown button to print files related to the current row and for that, I chose the bootstrap button. That button is on the last position in the row and when I click on the dropdown btn result is not shown in full width and sometimes when the list is bigger list is hidden like in the screenshot.

I try manually to set width:100% on li and also I try 100% on ul but not work.

I just want to show the list names to be shown in full width not like on the screenshot.

enter image description here


<td class="text-center">
   <div class="btn-group">
      <button type="button" onclick="return getProductFiles(54)" data-product-id="54" class="btn btn-secondaryr dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
      <i class="fa fa-print"></i> Izaberi
      <ul class="dropdown-menu show" id="product_files_dropdown" style="width: 100%; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(-32px, 40px);" data-popper-placement="bottom-start">
         <li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a></li>
         <li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a></li>

I populate list with ajax when user click on button

function getProductFiles(product_id) {
        var self = product_id;

            type: "GET",
            url: '/admin/proizvod/ajax?product_files=' + self,

            success: function(result) {
                // $(".testn").html(result);

                var json = JSON.parse(result);

                for (var i in json) {
                    var li = $('<li style="width:100%; border-bottom: 1px solid #333">');

                    li.append($('<a href="" id=' + json[i].Id + '>').html(json[i].name));

            error: function(xhr, status, err) {
                alert(err.toString(), 'Error - LoadListItemsHelper');
            complete: function(result, jqXHR, status) {

Does anyone have any idea how to do this? Thanks


  • The dropdown appears to work correctly by simply following the Bootstrap examples. The custom styles applied over Bootstrap are causing the problem.

    function getProductFiles(n) {
      // placeholder
    <div class="row">
    <div class="col">
    <table class="table table-sm table-bordered">
            <div class="dropdown">
              <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a>
                <a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a>
                <a class="dropdown-item" href="#">Something else here</a>
    <div class="col">
      <div class="alert alert-success" style="min-height:10rem;">
      Some other text here
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>