使用侧边栏时不显示语义UI下拉列表

Question

使用侧边栏时，如果按钮中有下拉列表，则下拉列表不会显示在推杆外部。

为什么会这样，我该如何解决？只是设置overflow-visible似乎不起作用。

示例JSFiddle：https://jsfiddle.net/3djmjhn5/1/

码：

$('.sidebar').sidebar({
	context: '.pushable'
})

$('.dropdown').dropdown();

.pushable {
  height: auto!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

<h2>Dropdown doesn't Show when using sidebar</h2>

<div class="pushable">
  <div class="ui visible sidebar menu">
  </div>
  <div class="pusher">
    <div class="ui inverted menu">
      <div class="item">stuff</div>
      <div class="ui dropdown item">
            <div class="default text">select one</div>
            <input type="hidden" value="">
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Stuff 1</div>                
                <div class="item">Stuff 2</div>
                <div class="item">Stuff 3</div>
                <div class="item">Stuff 4</div>
                <div class="item">Stuff 5</div>
                <div class="item">Stuff 6</div>
            </div>
      </div>
    </div>
  </div>
</div>

<h2>Will Show Normally</h2>
<div class="ui inverted menu">
  <div class="item">stuff</div>
  <div class="ui dropdown item">
    <div class="default text">select one</div>
    <input type="hidden" value="">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Stuff 1</div>                
      <div class="item">Stuff 2</div>
      <div class="item">Stuff 3</div>
      <div class="item">Stuff 4</div>
      <div class="item">Stuff 5</div>
      <div class="item">Stuff 6</div>
    </div>
  </div>
</div>

Answer 1

您必须使用!important覆盖语义UI元素的overflow属性。看看下面的例子：

$('.sidebar').sidebar({
	context: '.pushable'
})

$('.dropdown').dropdown();

.pushable {
  height: auto!important;
}

.pusher {
overflow: visible!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

<h2>Dropdown doesn't Show when using sidebar</h2>

<div class="pushable">
  <div class="ui visible sidebar menu">
  </div>
  <div class="pusher">
    <div class="ui inverted menu">
      <div class="item">stuff</div>
      <div class="ui dropdown item">
            <div class="default text">select one</div>
            <input type="hidden" value="">
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Stuff 1</div>                
                <div class="item">Stuff 2</div>
                <div class="item">Stuff 3</div>
                <div class="item">Stuff 4</div>
                <div class="item">Stuff 5</div>
                <div class="item">Stuff 6</div>
            </div>
      </div>
    </div>
  </div>
</div>

<h2>Will Show Normally</h2>
<div class="ui inverted menu">
  <div class="item">stuff</div>
  <div class="ui dropdown item">
    <div class="default text">select one</div>
    <input type="hidden" value="">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Stuff 1</div>                
      <div class="item">Stuff 2</div>
      <div class="item">Stuff 3</div>
      <div class="item">Stuff 4</div>
      <div class="item">Stuff 5</div>
      <div class="item">Stuff 6</div>
    </div>
  </div>
</div>

Answer 2

这是因为溢出：隐藏在类.pusher和.pushable上。

设置溢出：可见然后将修复它。

将id添加到.pusher（即my-pusher）并将css更新为：

.pushable {
  height: auto;
  overflow: visible;
}
#my-pusher.pusher {
  overflow: visible;
}

Check the fiddle