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

回答

相關問題