ui-grid 행의 높이를 변경하는 방법은?

ui-grid 행의 높이를 변경하는 방법은?

저는 ui-grid를 사용하고 있습니다.저는 줄이 많아서 스크롤을 사용합니다.제가 줄의 높이를 바꾸려고 할 때까지 모든 것이 완벽하게 작동합니다.그러면 스크롤이 엉망이 됩니다.여기에 예를 추가했습니다. http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview 이것은 ui-grid 웹사이트의 튜토리얼 중 하나입니다 - 제가 변경한 것은 CSS뿐입니다.이 규칙들을 추가했습니다.

.ui-grid-cell-contents {
  padding: 1px 1px;
}

.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
  height: 22px !important;
  font-size: 12px;
  line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
  height: 55px !important;
}
.ui-grid-filter-container {
  padding: 1px 3px;
}

위의 CSS 규칙을 제거하면 스크롤이 완벽하게 작동합니다.따라서 CSS 규칙을 더 추가하거나 줄 높이를 제대로 설정하기 위해 그리드의 API를 사용해야 합니다.어떤 도움이라도 주시면 감사하겠습니다.

행 높이를 변경하고 부드럽게 스크롤하려면 어떻게 해야 합니까?

업데이트: 다음은 기본 그리드와 수정된 CSS를 비교한 것입니다. http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview 은 각 그리드에 대해 행을 위아래로 스크롤합니다.그 차이는 꽤 분명할 것입니다.

다음 항목을 제거합니다.

height: 22px !important;

CSS에서 다음을 추가합니다.

rowHeight:22

그리드 옵션으로 이동합니다.

이것이 훨씬 더 부드럽게 느껴집니다.

포크플렁커

scope.gridOptions = {rowHeight: 33 } 행 높이를 변경하는 가장 좋은 방법은 그리드 옵션입니다.

이 내용을 CSS에 추가해 보십시오.

.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
  height: auto !important;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}

그리드 클래스를 그에 맞게 변경하면 됩니다.

.grid{
    height: 70vh;
}

언급URL : https://stackoverflow.com/questions/27200875/how-to-change-height-of-ui-grid-row