我創建了一個新模板來覆蓋Angular UI Bootstrap中的popup.html。我正在努力提出一個解決方案的變化解決方案。Angular UI DatePicker popup.html模板覆蓋分辨率變化

要改變分辨率：

CTRL然後鼠標滾輪
CTRL然後+和-

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

我試圖用div風格的相對包裝我的模板，但沒有奏效。我會繼續修補，但任何幫助表示讚賞。

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

來源

2015-06-26 Harbinger

待辦事項你的意思是你希望你的新模板能夠響應？ – jme11

是的，我希望它有響應。當分辨率發生變化時，我希望日曆與未來的日期部分保持一致。 – Harbinger

我不是100％肯定你借決議的意思，但如果你想使它響應（對於不同的取景框大小），你可能會考慮稍微不同的方法。請注意，由於日曆本身具有固定大小（並且將響應的固定大小混合在一起具有挑戰性），所以任何方法都將付出更多努力。

我會通過改變整個下拉結構來解決這個問題。從語義上講，在這種情況下，無序列表對我來說並不合理。所以，爲了簡單明瞭，我使用了div。另外，如果你要做出迴應，不要忘記添加視口元標記。

以下是我會結構的模板：

<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

來源

2015-06-29 14:39:07 jme11

Angular UI DatePicker popup.html模板覆蓋分辨率變化

回答

Updated Plunker

相關問題