Using multiple ui-grid , need to edit ui-grid-row class for one grid

Question

I am using multiple ui-grid, wants to edit ui-grid-row class for one grid only. but its reflecting to all.

Code

I want height of row should be auto for second grid only.

I applied CSS as

.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;}

but nothing happened.

Can someone help on this.

Thanks

we are developer we only understand code. You have to add a code examble of your problem. Otherwise the question will be closed, nobody can answer it. — tire0011, Mar 21 '17 at 08:48
Excellent! Do post if you have other question. The community is always here to help. — Tim Harker, Mar 28 '17 at 12:13
i have one more regarding smart tables. http://stackoverflow.com/questions/43069372/smart-table-throwing-error-as-multiple-directives — cheeku, Mar 28 '17 at 12:32

Tim Harker · Accepted Answer · 2017-03-24T01:00:36.667

This should do it:

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>

(without seeing your HTML I can only guess - but I basically ADDED a gridR class rather than just adding an R to the existing grid class)

Hope that helps, let me know if you have any further questions.

Using multiple ui-grid , need to edit ui-grid-row class for one grid

1 Answers1