Word wrapping in angularjs ui-grid

Question

I am trying to create grid using angularjs ui-grid

Some of the column will have small width and would like to remove ellipse and tried using css option but text overflows to next column.

Here is what I haved tried

   var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid','ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.edit']);

      
    app.controller('MainCtrl', ['$scope', function ($scope) {
	$scope.gridOptions = { 
	  data: 'myData', 
	  enableFiltering: true,
      enableRowSelection: false,
      headerRowHeight: '20%',
	  headerCellClass: 'blue'
	  
	
	};		

      $scope.myData = [
        {
            "firstName": "Cox",
            "lastName": "Carney",
            "company": "Enormo",
            "employed": "1234",
			"address": "1234",
			"address1": "1234",
			"address2": "1234",
			"address3": "1234",
			"address4": "1234",
			"address5": "1234",
			"address6": "1234",
			"address7": "1234",
        },
        {
            "firstName": "Lorraine",
            "lastName": "Wise",
            "company": "Comveyer",
            "employed": "1234",
			"address": "1234",
			"address1": "1234",
			"address2": "1234",
			"address3": "1234",
			"address4": "1234",
			"address5": "1234",
			"address6": "1234",
			"address7": "1234",
        },
        {
            "firstName": "Nancy",
            "lastName": "Waters",
            "company": "Fuelton",
            "employed": "1234",
			"address": "1234",
			"address1": "1234",
			"address2": "1234",
			"address3": "1234",
			"address4": "1234",
			"address5": "1234",
			"address6": "1234",
			"address7": "1234",			
        }
    ];
	$scope.gridOptions.columnDefs = [
	{ name: 'firstName', enableCellEdit:false, width: '20%',headerCellClass: 'blue' },
	{ name: 'lastName', enableCellEdit:false,width: '25%' },
	{ name: 'company', width: '5%'},
	{ name: 'employed', width: '5%'},
	{ name: 'address' , width: '5%'},
	{ name: 'address1', width: '5%' },
	{ name: 'address2', width: '5%' },
	{ name: 'address3', width: '5%' },
	{ name: 'address4', width: '5%' },
	{ name: 'address5', width: '5%' },
	{ name: 'address6', width: '5%' },
	{ name: 'address7' , width: '10%'},
	
	];	


	
    }]);

    .grid {
      width: 900px;
      height: 250px;
    }
	.blue { color: blue;  }
.ui-grid-header-cell .ui-grid-cell-contents {
     height: 90px;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl">
    <br>
    <br>
    <div id="grid1" ui-grid="gridOptions" ui-grid-edit ui-grid-resize-columns class="grid"></div>
  </div>


  <script src="app.js"></script>
</body>

</html>

Dan · Accepted Answer · 2016-05-08 06:27:07Z

1

If you override the text-overflow property using clip you can remove the ellipses without overflowing the text.

.ui-grid-header-cell .ui-grid-cell-contents {
   height: 90px;
   -ms-text-overflow: clip;
   -o-text-overflow: clip;
   text-overflow: clip;
 }

plunkr

Note, you can also disable the v with

.ui-grid-icon-angle-down::before {
  content: none;
}

edited May 8, 2016 at 6:27

answered May 8, 2016 at 6:20

Dan

3,07021 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Word wrapping in angularjs ui-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