Выпадающие списки семантики-UI внутри горизонтальной прокрутки DIV

Question

Я пытаюсь включить всплывающие окна Semantic-UI в таблице со многими столбцами, которая имеет горизонтальную полосу прокрутки.

При нажатии выпадающего списка параметры скрыты внутри div.

скрипку: http://jsfiddle.net/rotemx/n0azk0jc/

код:

<div id="wrapper"> 
    <div id="content"> 
    <div style="width: 500px"> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

скриншот:

quesiton: Как я могу сделать выпадающие списки видимыми?

Answer 1

С вашей текущей настройкой вы не можете. Все, что внутри элемента с переполнение: ни один не может быть показан за пределами границ элемента.