Угловой пользовательский интерфейс DatePicker popup.html шаблон переопределяет изменения разрешения

Question

Я создал новый шаблон для переопределения popup.html в Угловом пользовательском загрузочном бутстрапе. Я изо всех сил пытаюсь найти решение для изменения разрешения.

Чтобы изменить разрешение:

1. Ctrl затем колесо мыши
2. Ctrl затем + и -

Plunker: http://plnkr.co/edit/tpl:Klbek5SpOGIA4FXTmlFX?p=preview

Я пробовал обернуть свой шаблон родственником в стиле div, но это не сработало. Я буду продолжать возиться, но любая помощь приветствуется.

"<div style=\"position: relative\">" + 

Answer 1

Я не 100% уверен, что вы имеете в виду резолюции, но если вы пытаетесь сделать его отзывчивым (для различных размеров окна просмотра), вы могли бы рассмотреть несколько иной подход. Обратите внимание, что любой подход будет немного более напряженным, поскольку сам календарь является фиксированным размером (и смешение фиксированных размеров с отзывчивым является сложным).

Я бы подошел к этому, изменив всю структуру выпадающего списка. Семантически, неупорядоченный список на самом деле не имеет смысла для меня в этом контексте. Итак, для простоты и ясности я использовал divs. Кроме того, если вы собираетесь что-то реагировать, не забудьте добавить метатег viewport.

Вот как я бы структурировать шаблон:

<div class="dropdown-menu menu-extended" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)"> 
    <div class="clearfix"> 
    <div class="col-calendar"> 
     <div ng-transclude></div> 
    </div> 
    <div class="col-buttons"> 
     <h4>Something here...</h4> 
     <button class='btn btn-default' ng-click='select(date.setTime(date.getTime()+30 * 86400000).toLocaleDateString())'>30 days</button> 
    </div> 
    </div> 
    <div ng-if="showButtonBar" style="padding:10px 0"> 
    <span class="btn-group pull-left"> 
     <button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button> 
     <button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button> 
    </span> 
    <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button> 
    </div> 
</div> 

, а затем вы можете использовать медиа-запросы для уточнения, как раскрывающийся и "колонны" дисплей:

.menu-extended { 
    padding: 10px; 
} 

@media (min-width: 500px) { 
    .menu-extended { 
    width: 100%; 
    } 
    .col-calendar, .col-buttons { 
    padding: 15px; 
    float: left; 
    } 
    .col-calendar { 
    width: 65%; 
    } 
    .col-buttons { 
    width: 35%; 
    } 
} 

Updated Plunker