부트 스트랩 timepicker가 ui-grid의 격자 뒤에 숨어 있습니다. Angular Js

Question

ui 격자 셀에 timepicker를 표시해야합니다. 나는 그것을 구현했지만 문제가있다. 그것은 상단 셀에 대해서는 잘 작동하지만 하단 셀에 대해서는 타임 피커의 일부가 그리드 뒤에 숨어 있습니다. 여기 plunker가 있습니다. 두 번째 마지막 행에서 CELL3에

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

을 더블 클릭합니다. 편집 가능한 셀 템플릿이 열립니다. 이제 타이머 아이콘을 클릭하십시오. 시간 선택 도구가 열립니다. 그러나 그 아래 부분은 그리드 뒤에 숨어 있습니다. 내가 볼

Answer 1

이 문제가 수 있도록이 건축이다 : 당신은

솔루션

이 지침을 만들기 모든 행에 대해 동일한 id #timepicker이

$(function() { 

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

, 또한 우리는 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