Question

我试图隐藏垂直溢出，同时允许水平溢出下拉列表，以便可以选择子类别。我已尝试使用overflow-y: scroll;和overflow-x: visible，但这仍会导致溢出到一边滚动。

如何滚动垂直溢出，并允许水平溢出？

JSFiddle：https://jsfiddle.net/utqz406p/8/

段：

    $('.ui.dropdown')
      .dropdown({});

.ui.selection.dropdown.show .menu {
  overflow: visible !important;
}

<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>

<div class="ui search selection dropdown show" id="test">
  <span class="text">Search Selection</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>

  </div>
</div>

<div class="ui selection dropdown show" id="test2">
  <span class="text">Selection Visible</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>
  </div>
</div>

<div class="ui selection dropdown" id="test4">
  <span class="text">Selection Hidden</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>
  </div>
</div>

<div class="ui dropdown" id="test3">
  <span class="text">Choose Category</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">Category 1</span>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 2</span>
      <div class="menu">
        <div class="item">Item 2A</div>
        <div class="item">Item 2B</div>
        <div class="item">Item 2C</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      <span class="text">Category 3</span>
      <div class="menu">
        <div class="item">Item 3A</div>
        <div class="item">Item 3B</div>
        <div class="item">Item 3C</div>
      </div>
    </div>
    <div class="item">
      <span class="text">Category 4</span>
    </div>
    <div class="item">
      <span class="text">Category 5</span>
    </div>
    <div class="item">
      <span class="text">Category 6</span>
    </div>
    <div class="item">
      <span class="text">Category 7</span>
    </div>
    <div class="item">
      <span class="text">Category 8</span>
    </div>
    <div class="item">
      <span class="text">Category 9</span>
    </div>
    <div class="item">
      <span class="text">Category 10</span>
    </div>

  </div>
</div>

Answer 1

由于默认语义样式和结构不允许您这样做，因此需要在菜单项中添加div并向该div添加滚动。

您也可以尝试添加

.ui.selection.dropdown .menu {
  overflow: visible!important;
  max-height: none;
}

将在选择下拉菜单中为您提供确切的.ui .dropdown样式。这是处理语义选择下拉列表的最佳方式，而不是在没有必要的情况下添加滚动条。

以下是FIDDLE

滚动垂直溢出，同时仍允许水平溢出

1 个答案: