>>Hi everybody,
>>
>>I can not figure out why my Date Created column is not properly resized and remains quite narrow therefore causing the content to flow to second row within row.
>>
>>Do you see the problem here I am missing?
>>
>>Thanks in advance.
>>
>>
>> <div class="widget-content ng-cloak">
>> <div class="padd">
>> <div class="ng-load-indicator" ng-show="isPayInvoicesLoading"></div>
>> <div class="alert alert-info" ng-show="alertType === 'info'">
>> <i class="icon-info-sign icon-2x"></i>
>> {{ alertMessage }}
>> </div>
>> <table id="payInvoicesTable" ng-show="payInvoices" class="table table-bordered table-hover table-list">
>> <thead data-search:table-header data-table="payInvoicesTable" data-search="search()">
>>
>> </thead>
>> <tbody>
>> <tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
>> <td class="col-md-2">
>> <input type="checkbox" ng-model="result.isToBePaid"
>> data-no:dirty-check
>> ng-change="payChange(result)" />
>>
>> </td>
>> <td class="col-md-2">
>> <a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>
>> </td>
>> <td class="col-md-5">
>> {{result.descrip}}
>> </td>
>> <td class="col-md-12 col-lg-12">
>> {{result.dateCreated |date: 'medium'}}
>> </td>
>> <td class="col-md-4">
>> <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
>> </td>
>> <td class="col-md-4">
>> <input type="number" name="payment" ng-model="result.payment" id="payment"
>> ng-disabled="!result.isToBePaid"
>> ng-class="{'negative-amount' : result.payment < 0}"
>> min="0"
>> data-no:dirty-check
>> data-sm:number placeholder=" 000.00"
>> data-sm:number-format data-accuracy="2" />
>> <div class="field-validation-error">
>> <span ng-show="payInvoicesRow.payment.$error.min">Payment should not be negative.</span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> <tfoot>
>> <tr>
>> <td class="col-md-2"></td>
>> <td class="col-md-2"></td>
>> <td class="col-md-5"></td>
>> <td class="col-md-12 col-lg-12">@String.Format(Labels.totalX, ":")</td>
>> <td class="col-md-4"><span ng-class=" {'negative-amount': total('invoiceBalance') < 0}">{{total('invoiceBalance')|currency}}</span></td>
>> <td class="col-md-4">{{total('payment')|currency}}</td>
>> </tr>
>> </tfoot>
>> </table>
>> </div>
>>>>
>>Attached is the picture of how this looks like.
>
>Doesn't the grid system require a container/row/col layout. If you look at bootstrap.css the .col style is only used when it is a descendant of container.
So container outside repeat, row for each repeat and don't use a table
(Duh, replied to myself rather than updating - time for coffee :-{ )
