サイドバーを使用するとセマンティックUIのドロップダウンが表示されない

Question

サイドバーを使用する場合、プッシャにドロップダウンがある場合、プルダウンの外側にプルダウンが表示されません。

これはなぜですか、どのように解決できますか？ overflow-visibleを設定するだけでは機能しないようです。

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

コード：

$('.sidebar').sidebar({ 
 
\t 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

：

はにあなたの.pusher（つまり私の-プッシャー）と更新CSSにIDを追加します。以下の例を見て：

$('.sidebar').sidebar({ 
 
\t 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。

オーバーフローを設定すると、「オン」に設定すると修正されます。あなたは!importantとセマンティックUI要素のoverflowプロパティをオーバーライドする必要があり

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

Check the fiddle