여러 개의 ui-grid를 사용하여 하나의 격자에 대해 ui-grid-row 클래스를 편집해야합니다.

Question

하나의 격자에 대해서만 ui-grid-row 클래스를 편집하고자하는 다중 ui 격자를 사용하고 있습니다. 하지만 모두에게 반영.

코드

나는 행의 높이가 두 번째 그리드에만 자동해야합니다.

; {테이블 행 디스플레이}, {! 자동 중요한 높이} .gridR.ui 그리드 행> DIV

나는

.gridR.ui - 그리드 행으로 CSS를 적용

.gridR.ui-grid-row> div .ui-grid-cell {디스플레이 : 테이블 셀, 플로트 : 없음, 세로 맞춤 : 중간; 높이 : 자동! 중요;}

.gridR.ui-grid-cell-contents {white-space : normal; 텍스트 오버플로 : 상속, 단어 끊기 : 단어 끊기;}

아무 일도 없었습니다.

누군가가이를 도와 줄 수 있습니까?

감사

Answer 1

이 그것을 수행해야합니다

var app = angular.module('app', ['ui.grid']); 
 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 
    var aLotOfData = [{ 
 
     "LongString": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." 
 
    }]; 
 
    aLotOfData.push(aLotOfData[0]); 
 
    aLotOfData.push(aLotOfData[0]); 
 
    aLotOfData.push(aLotOfData[0]); 
 
    $scope.gridOptionsL = { 
 
     columnDefs: [{name: 'LongString', displayName: 'Default Style'}], 
 
     data: aLotOfData 
 
    }; 
 
    $scope.gridOptionsR = { 
 
     columnDefs: [{name: 'LongString', displayName: 'Your Style'}], 
 
     data: aLotOfData 
 
    }; 
 
    } 
 
]);

div[ui-grid] { 
 
    height: 180px; 
 
    width: 300px; 
 
    float: left; 
 
} 
 

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

 
.gridR .ui-grid-row>div { 
 
    display: table-row; 
 
} 
 

 
.gridR .ui-grid-row>div .ui-grid-cell { 
 
    display: table-cell; 
 
    float: none; 
 
    vertical-align: middle; 
 
    height: auto!important; 
 
} 
 

 
.gridR .ui-grid-cell-contents { 
 
    white-space: normal; 
 
    text-overflow: inherit; 
 
    word-break: break-word; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <div ui-grid="gridOptionsL" class="grid gridL"></div> 
 
    <div ui-grid="gridOptionsR" class="grid gridR"></div> 
 
</div>

(당신의 HTML을 보지 않고 난 단지 추측 할 수있다 - 그러나 나는 기본적으로 단지 R을 추가하는 대신 gridR 클래스 추가 기존 grid 클래스로)

희망, 도움을주세요. 더 이상의 질문이 있으시면