Search code examples
javascripthtmljquerycsstwitter-bootstrap

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

Output:

<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
      </button>
      <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>
      </ul>
   </div>
</td>

I populate list with ajax when user click on button

function getProductFiles(product_id) {
        var self = product_id;

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

            success: function(result) {
                // $(".testn").html(result);
                console.log(JSON.parse(result));

                var json = JSON.parse(result);
                $('#product_files_dropdown').empty('');

                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));

                    $('</li>');
                    $("#product_files_dropdown").append(li);
                }
            },
            error: function(xhr, status, err) {
                alert(err.toString(), 'Error - LoadListItemsHelper');
            },
            complete: function(result, jqXHR, status) {
                $(".loader").fadeOut();
            }
        });
    }

Does anyone have any idea how to do this? Thanks


Solution

  • 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">
     <thead><tr><th>A</th><th>Opcije</th><th>Stampanje</th></tr></thead>
      <tbody>
        <tr>
          <td>X</td>
          <td>X</td>
          <td>
            <div class="dropdown">
              <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
         Izaberi
      </button>
              <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>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    
    </div>
    <div class="col">
      <div class="alert alert-success" style="min-height:10rem;">
      Some other text here
      </div>
    </div>
    </div>
    
    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>