引导下拉按钮列表隐藏并充满

问题描述 投票:0回答:1

大家好,我尝试实现一个 html 表格单元格下拉按钮来打印与当前行相关的文件,为此,我选择了引导按钮。该按钮位于行中的最后一个位置,当我单击下拉按钮时,结果不会以全角显示,有时当列表较大时,列表会像屏幕截图中那样隐藏。

我尝试在 li 上手动设置 width:100%,并且在 ul 上尝试 100%,但不起作用。

我只想显示以全角显示的列表名称,而不是像屏幕截图中那样。

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
      </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>

当用户单击按钮时,我用ajax填充列表

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

有人知道如何做到这一点吗? 谢谢

javascript html jquery css twitter-bootstrap
1个回答
0
投票

只需遵循 Bootstrap 示例,下拉列表似乎就可以正常工作。在 Bootstrap 上应用的自定义样式导致了问题。

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>

© www.soinside.com 2019 - 2024. All rights reserved.