Coding Away Coding Away - 2 months ago 7
CSS Question

Data in column is running off the page , how can it be contained / wrapped

I have bootstrap 3.x.x. Not that I have a lot more data. I'm just now seeing these rows shooting across the page.
Here is a Fiddle of it

https://jsfiddle.net/m562283y/

So since it is dynamic, I'm not going to obviously know when to insert br tag and those are just bad ...

The TD column looked like this

<td class="ng-binding">00000006,00000005,00000007,00000008,0000000B,0000000D,0000000F,00000010,00000011,00000012,00000013,00000014,00000015,00000016,00000017,00000018,00000019,0000001A,0000001B,0000001C,0000001D,0000001E,0000001F,00000020</td>


Is the some responsive way to get the wrapping?

enter image description here

<div class="ui-view ng-scope"><div class="panel panel-primary ng-scope">
<!--<div class="panel-heading" style="font-size:large">Baker Beach Device Registry
</div>-->

<div class="panel-body">

<!--<div class="alert alert-info">
<p>Sort key: {{sortKey}}</p>
<p>Reverse: {{reverse}}</p>
<p>Search String : {{search}}</p>
</div>-->
<!--<div class="row">-->

<div class="col-lg-12">
<form class="form-inline ng-pristine ng-valid">
<div class="form-group">
<label>Search</label>
<input type="text" ng-model="search" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Search">
</div>
</form>
<div class="panel panel-default">
<table class="table table-striped table-hover">
<thead>
<tr>

<th ng-click="sort('DeviceId')">Device ID
<span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='DeviceId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('DeviceStatus')">Device Status
<span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='DeviceStatus'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('StagedManifestIdList')">Staged Manifest
<span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='StagedManifestIdList'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('ManifestIdList')">Archived Manifests
<span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='ManifestIdList'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>

</tr>
</thead>
<tbody>

<!-- ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
<!--Add in sref directive-->
<td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022BBA000000200001">00022BBA000000200001</a>
</td>

<!--<td>{{device.DeviceStatus}}</td>-->
<td ng-style="set_color(device)" class="ng-binding" style="color: orange;">Unactivated</td>
<!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
<td class="ng-binding"></td>
<td class="ng-binding">00000002,00000001,00000003,00000004</td>
<td>
<a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022BBA000000200001/info">
Edit
</a>
</td>
</tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
<!--Add in sref directive-->
<td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022BBA000000220001">00022BBA000000220001</a>
</td>

<!--<td>{{device.DeviceStatus}}</td>-->
<td ng-style="set_color(device)" class="ng-binding" style="color: orange;">Unactivated</td>
<!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
<td class="ng-binding"></td>
<td class="ng-binding">0000000A,00000009,0000000C,0000000E</td>
<td>
<a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022BBA000000220001/info">
Edit
</a>
</td>
</tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
<!--Add in sref directive-->
<td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022BBA000000210001">00022BBA000000210001</a>
</td>

<!--<td>{{device.DeviceStatus}}</td>-->
<td ng-style="set_color(device)" class="ng-binding" style="color: green;">Activated</td>
<!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
<td class="ng-binding"></td>
<td class="ng-binding">00000006,00000005,00000007,00000008,0000000B,0000000D,0000000F,00000010,00000011,00000012,00000013,00000014,00000015,00000016,00000017,00000018,00000019,0000001A,0000001B,0000001C,0000001D,0000001E,0000001F,00000020</td>
<td>
<a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022BBA000000210001/info">
Edit
</a>
</td>
</tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
<!--Add in sref directive-->
<td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022B9E000000060001">00022B9E000000060001</a>
</td>

<!--<td>{{device.DeviceStatus}}</td>-->
<td ng-style="set_color(device)" class="ng-binding" style="color: blue;">New Device</td>
<!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
<td class="ng-binding">00000022,00000023</td>
<td class="ng-binding"></td>
<td>
<a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022B9E000000060001/info">
Edit
</a>
</td>
</tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 -->
</tbody>
</table>
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" class="ng-isolate-scope"><!-- ngIf: 1 < pages.length --></dir-pagination-controls>
</div>
</div>
<!--</div>-->
</div>
</div></div>

Answer

Your table layout needs to be fixed. Put in the following css:

table{
  table-layout:fixed;
}

table td{
  word-wrap: break-word;
}

Here's your updated fiddle