Раскрывающаяся кнопка Bootstrap 4 не появляется в таблице фиксированной высоты - PullRequest
Новая
       1

Раскрывающаяся кнопка Bootstrap 4 не появляется в таблице фиксированной высоты

0 голосов
/ 25 января 2019

Я использую выпадающую кнопку начальной загрузки 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

Это изображение показывает всплывающее меню "внутри" таблицы с фиксированной высотой tbody. Menu pops inside table

См., Например, JSFiddle .

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Вам нужно установить границу данных, отличную от 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>
0 голосов
/ 25 января 2019

Вам просто нужно отключить параметр flip (data-flip="false"), чтобы отключить перекрывающуюся логику Поппера, и установить для параметра 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

Подробнее о выпадающем списке

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...