2015-07-03 2 views
0

У меня есть заголовок панели навигации с различными элементами в правильном выравнивании. Я установил переполнение для скрытия на окружающем div (Toolbox), так что, если размер экрана изменится, заголовок загорится под левым брендом div.Bootstrap-ui dropdown скрыт с окружающим переполнением div

В навигационной панели я разместил раскрывающийся список bootstrap-ui. Когда он щелкнут и отображается, он обрезается переполнением DivX Toolbox. Если я удалю переполнение, это будет хорошо, но тогда у меня возникнет проблема, когда переполнение будет видно при уменьшенном размере экрана.

Как вы можете включить раскрывающееся меню, сохраняя при этом содержимое навигационной панели скрытым, если оно сжато?

plunkre

<div id="ToolBox"> 
    Some really important text that shouldn't wrap with a reduced width screen 
    <span class="dropdown" dropdown on-toggle="toggled(open)"> 
    <a href class="dropdown-toggle" dropdown-toggle> 
     Period:{{currentPeriod.Description}} 
    </a> 
    <ul class="dropdown-menu"> 
     <li id="periodSelector" ng-model="currentPeriod" ng-repeat="period in periodList track by period.PeriodId"> 
      {{period.Description}} 
     </li> 
    </ul> 
</span> 

    <div id="SiteTitle" class="ng-binding">myApp</div> 
    </div> 
+0

Что вы хотите сделать на самом деле? Пожалуйста, уточните. Вы хотите скрыть раскрывающееся меню при уменьшенном размере экрана? – Wazaaaap

+0

Как предотвратить падение скрытия/обрезания окружающим div при сохранении переполнения (если возможно)? Лучше? – sarin

+0

Я не понимаю, почему вы использовали бы переполнение скрытое. Это ничего не делает, так как ваш инструментарий и бренд позиционируются абсолютно. Использование z-индекса будет позиционировать один выше или ниже. Что вы хотите делать на небольших устройствах? Вы можете использовать медиа-запросы для восстановления всей панели инструментов для небольших устройств. – jme11

ответ

2

Добавления атрибута раскрывающегося-конкатенирующий к кузову должны решить эту проблему. Подробнее см. Документацию here.

редактировать

Обновлено шлепнуть here

<span class="dropdown" dropdown dropdown-append-to-body> 
+0

Я попытался добавить его к вышеупомянутому плункеру, и мне не повезло. Если я не ошибаюсь! – sarin

+0

Верьте или нет, я действительно попробовал атрибут dropdown-append-to-body, и это не сработало для меня. Я заметил, что ваш Plunker использовал v0.13 ui-bootstrap, и я использовал только v0.12. Когда я обновил его, он работал нормально. Однако он также требует более поздней версии Angular, поэтому я собираюсь провести некоторое время, проверяя нарушения. Спасибо за помощь! – sarin