Updated Plunker

Question

我创建了一个新模板来覆盖Angular UI Bootstrap中的popup.html。我正在努力提出改变分辨率的解决方案。

更改分辨率：

ctrl 然后鼠标滚轮
ctrl 然后 + 和 -

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

我尝试用div样式的亲戚包装我的模板但是没有用。我会继续修补，但任何帮助都表示赞赏。

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

Answer 1

我不是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%;
  }
}

Angular UI DatePicker popup.html模板覆盖分辨率更改

1 个答案:

Updated Plunker