>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 ?
