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.