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