複数のuiグリッドを使用すると、1つのグリッドに対してuiグリッド行クラスを編集する必要があります。

Question

複数のuiグリッドを使用していますが、1つのグリッドに対してのみuiグリッド行クラスを編集します。 しかし、そのすべてに反映されます。

コード

私は、行の高さが唯一の第2のグリッドの自動なければなりませんしたいです。

Iは

.gridR.uiグリッド列{高さ！：自動重要;}のようにCSSを適用 .gridR.uiグリッド列> DIV {表示：表行;}

.gridR.ui-grid-row> div .ui-grid-cell {display：table-cell; float：なし;高さ：auto！important;}

.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クラスへ）

希望があれば教えてくださいそれ以上の質問があれば。