UI 끝 부분에 공백을 추가하는 방법 - 그래픽 1

Question

UI 그리드 끝 부분에 공백을 추가해야하는 경우가 있습니다. 더 명확하게 이미지를 확인하십시오 : 그들의 총이 완전히 용기를 기입하지 않도록

Answer 1

당신은 모든 컬럼의 폭을 수정할 수 있습니다. 그런 다음 CSS를 통해 해당 공간을 조정할 수 있습니다.

$scope.gridOptions.columnDefs = [{ 
    name: 'id', 
    width: "20%" 
}, { 
    name: 'name', 
    width: "30%" 
}, { 
    name: 'age', 
    displayName: 'Age (not focusable)', 
    allowCellFocus: false, 
    width: "15%" 
}, { 
    name: 'address.city', 
    width: "20%" 
}]; 

, 그런 다음 CSS의 미세 조정 :

.ui-grid-top-panel { 
    background: none; 
    border: none; 
} 

.ui-grid-header-cell { 
    background: #ccc; 
} 

.ui-grid-viewport { 
    overflow: hidden !important; 
} 

.ui-grid-header { 
    border: none; 
}