CODEWITHSUNDEEP
cssangularjsng-gridword-wrapcelltemplate
user3403666
user3403666

Reputation: 61

Wrap Text in ng-grid Cell Template?

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!

Upvotes: 0

Views: 3937

Answers (1)

Seth Allison
Seth Allison

Reputation: 81

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 */

Upvotes: 2

Related Questions