ブートストラップtimepickerがグリッドの背後に隠れている、Angular Js

Question

私はuiグリッドセルにtimepickerを表示する必要があります。私はそれを実装しましたが、問題があります。それは上部のセルでうまく動作しますが、下部のセルでは、タイムピッカーの一部がグリッドの後ろに隠れています。ここにはプランカがあります。

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

最後から二番目の行のCELL3をダブルクリックします。編集可能なセルテンプレートが開きます。タイマーアイコンをクリックします。時間ピッカーが開きます。しかし、それは下部がグリッドの後ろに隠れています。

Answer 1

私は、問題は、あなたがこの建設ということで、以下を参照してください

$(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' 
      }); 
    } 
} 

}]）;

あなただけtime-control属性が<div class='input-group date">

Plnkrまたexample

screenshot