代码之家  ›  专栏  ›  技术社区  ›  jim31415

引导4下拉按钮在固定高度表中不弹出

bootstrap-4 css
  •  0
  • jim31415  · 技术社区  · 6 年前

    我在一张桌子里用了一个bootstrap 4下拉按钮。当我限制车身高度时,按钮组菜单不会弹出。我想知道如何在固定高度的桌子上弹出菜单。 

    #table1 tbody {overflow-y:scroll; display:block;height:120px;}

<td>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <a class="dropdown-item" href="#">Link 4</a>
      <a class="dropdown-item" href="#">Link 5</a>
      <a class="dropdown-item" href="#">Link 6</a>
    </div>
  </div>
</div>
</td>

    此图显示在没有固定高度的表外弹出的菜单。 Menu pops outside table

    此图显示了弹出“inside”(内部)具有固定高度tbody的表的菜单。 Menu pops inside table

    见 JSFiddle 例如。

    2 回复  |  直到 6 年前
        1
  •  2
  •   hawkstrider    6 年前

    您需要将数据边界设置为ScrollParent以外的其他值。即窗口、视区或HTML元素。

    https://getbootstrap.com/docs/4.2/components/dropdowns/#options 

    .g {
  display: inline-block;
  vertical-align: top;
  margin-right: 40px;
}

table {
  border: 1px solid #ccc;
}

#t1 tbody {
  overflow-y: scroll;
  display: block;
  height: 120px;
}

td {
  overflow: visible;
  border: 1px solid #ccc;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<body>

  <div class="container">

    <div class="g">
      <h2>Dropdown 1</h2>
      <table id="t1">
        <tr>
          <td style="width:80px;">1</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td>2</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

      </table>
    </div>


    <div class="g">
      <h2>Dropdown 2</h2>

      <table id="t2">
        <tr>
          <td style="width:80px;">1</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td>2</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

      </table>
    </div>
        2
  •  1
  •   Carol Skelly    6 年前

    你只需要禁用 flip 选择权(期权) data-flip="false" )禁用popper的重叠逻辑,并设置 boundary 选择“表格”… 

    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-flip="false" data-boundary="table">
            Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
            <a class="dropdown-item" href="#">Link 4</a>
            <a class="dropdown-item" href="#">Link 5</a>
            <a class="dropdown-item" href="#">Link 6</a>
        </div>
</div>

    演示: https://www.codeply.com/go/XnCyEdnLRX

    More on the Dropdown

    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号