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
– tire0011, Commented Mar 21, 2017 at 8:48
Excellent! Do post if you have other question. The community is always here to help. — Tim Harker
– Tim Harker, Commented Mar 28, 2017 at 12:13

Tim Harker · Accepted Answer · 2017-03-24 01:00:36Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related