>>>>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 :-{ )
>
>I do need to use a table because it's a special class with some extra functionality such as column's re-ordering, etc.
>
>Also, I believe it worked in other forms, but not in this one (this one is ui-view called from the index and each tab is a separate form). I think it worked in the index page (using classes for td).
>
>Do you see another way to get proper column sizing still using a table?
>
>Thanks.

AFAICS your use of the 'col-xx-x' class is merely applying the style width attribute - so your page translates to:

            <tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
                <td style="width: 16.666666666666664%;">
                    <input type="checkbox" ng-model="result.isToBePaid"
                           data-no:dirty-check
                           ng-change="payChange(result)" />

                </td>
                <td style="width: 16.666666666666664%;">
                    <a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>
                </td>
                <td class="col-md-5" style="width:41.66666666666667%;">
                    {{result.descrip}}
                </td>
                <td style="width: 100%;">
                    {{result.dateCreated |date: 'medium'}}
                </td>
                <td style="width: 33.33333333333333%;">"
                    <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
                </td>
                <td style="width: 33.33333333333333%;">
                    <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>

Obviously your percentages don't add up......