0

I have some text I displayed as following:

columnDefs: [
field: "text", displayName: 'Text', width:'20%',
    cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-repeat = "text in COL_FIELD" ng-cell-text>{{text.name}}{{$last ? "" : ", "}}</span></div>'}
]

Which basically loops through the "text" variable array I declared in my .js file and displays the contents in the cell. Is there a way to wrap the text so that it wraps around the 20% width I provided? I know that style="white-space: normal can do text wrapping but I'm not sure how to integrate that with the statement I have above. If anyone could help that would be great.

Thanks!

user3403666
  • 61
  • 3
  • 10
  • I don't get it. Please show us how your variables are declared in your js. – mainguy Apr 02 '14 at 13:09
  • width in ng-grid defines the width of the column. So you're wanting your column to take up 20% of the available grid width. It won't do anything for the cell contents (that I'm aware of), i.e. causing them to wrap. – c0bra Apr 14 '14 at 17:34

1 Answers1

2

You should be able to enter the data you want in the cell and then using the following CSS code will allow text wrapping in the grid cells.

/* CSS to allow text wrapping */
.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
}

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

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}
/* End of CSS to allow text wrapping */
Seth Allison
  • 81
  • 5