bootstrap timepicker隐藏在ui-grid的网格后面，Angular Js

我需要在ui网格单元格中显示timepicker。我已经实施了，但有一个问题。它对上层单元格工作正常，但对于底层单元格，timepicker的某些部分隐藏在网格后面。这是抢劫犯。bootstrap timepicker隐藏在ui-grid的网格后面，Angular Js

http://plnkr.co/edit/YbZbboMz36xTCdikNyhN?p=previewenter code here

双击在第二最后一行小区3。可编辑单元格模板将打开。现在点击计时器图标。时间选择器将打开。但它的下半部分隐藏在网格后面。

来源

2017-04-21 MMM

我看，问题是你这种结构：

$(function() { 

      $('#timepicker').datetimepicker({ 
       //format: 'LT' 
       format: 'HH:mm' 
      }); 
});

你有相同的id #timepicker的每一行

解决方案

创建一个指示，我们还需要position存储位置配置，如果我们有$last元素，我们应该将垂直位置切换到顶部：

app.directive('timeControl', [function(){ 

    return { 
    restriction: 'A', 
    link: function(scope, elem, attr) { 

    var position = { 
     horizontal: 'right', 
     vertical: 'bottom' 
    } 

    if(scope.$last === true) { 
     position = { 
     horizontal: 'right', 
     vertical: 'top' 
    } 
    } 

    elem.datetimepicker({ 
       //format: 'LT' 
       widgetPositioning: position, 
       widgetParent: elem, 
       format: 'HH:mm' 
      }); 



      elem.datetimepicker({ 
       //format: 'LT' 
       format: 'HH:mm' 
      }); 
    } 
}

}]）;

HTML

<form name="inputForm"> 
<div class='input-group date' time-control style="position:absolute; width: 80px;"> 
       <input type='text' class="form-control" ng-class="col.colIndex()" ng-model="MODEL_COL_FIELD" style="height:28px"/> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-time timer"></span> 
       </span> 
</div>

你只需要添加time-control属性的div <div class='input-group date">

Plnkr example

而且screenshot

来源

2017-04-21 12:14:41 Leguest

Leguest嗨。感谢您的答复。实际上，在我原来的代码中，$ last是false，$ middle是true。在你的闯入者中，我认为$ last对于每一行都是正确的，因为如果你检查第一行的时间选择器，它的开头在顶部，现在时间选择器隐藏在顶部行的网格后面。 – MMM

嗨Leguest。你有机会看看它吗？ – MMM

是的，我明白了。我认为要解决这个问题，你应该在将数据放入ui.grid之前映射数据。看看这里http://stackoverflow.com/questions/29637188/how-to-get-row-index-in-angular-ui-grid-3-0。所以你需要用'currentRowIndex == $ scope.gridOpts.data.length - 1'替换'scope。$ last'。我希望它会帮助你 – Leguest

bootstrap timepicker隐藏在ui-grid的网格后面，Angular Js

回答

相关问题