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

Hi Viv,

I was actually thinking of trying to use width in % explicitly. Do you think it will be a good thing to try?

Thanks again for your help.