>>>>>>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.
>>>>
>>>>If the bootstrap 12 column layout can give you acceptable percentages you might as well use the 'col-xx-x' classes - easier to understand.
>>>>
>>>>Also you only need to set those classes on the td values for one row. e.g:
<!DOCTYPE html>
>>>><html xmlns="http://www.w3.org/1999/xhtml">
>>>><head>
>>>> <title></title>
>>>></head>
>>>><body>
>>>> <link href="Content/bootstrap.css" rel="stylesheet" />
>>>> <div>
>>>> <div class="col-md-2">
>>>> </div>
>>>> <div class="col-md-6">
>>>> <table class="table table-bordered table-striped">
>>>> <caption>Test</caption>
>>>> <thead>
>>>> <tr>
>>>> <td class="col-md-2"> Column 1</td>
>>>> <td class="col-md-3">Column 3</td>
>>>> <td class="col-md-7">Column 3</td>
>>>> </tr>
>>>> </thead>
>>>> <tr>
>>>> <td>This is Cell 1</td>
>>>> <td>Cell 2</td>
>>>> <td>Cell 3</td>
>>>> </tr>
>>>> <tr>
>>>> <td>This is Cell 1</td>
>>>> <td>Here is a very long cell indeed</td>
>>>> <td>Cell 3</td>
>>>> </tr>
>>>> <tfoot><tr><td colspan="3">This is at the bottom</td></tr></tfoot>
>>>> </table>
>>>> </div>
>>>> </div>
>>>></body>
>>>></html>
In your case you seem to be generating the header from a lookup. In that case you could probably define the col-xx-x classes there ?
>>>
>>>This is part of the directive and this is how it's defined
>>>
>>>
>>><tr style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'>
>>> <th ng-repeat="column in table.columns" ng-click="sort(column)">
>>> <span ng-if="column.displayName == undefined || column.displayName == ''">{{column.name}}</span>
>>> <span ng-if="column.displayName != undefined && column.displayName != ''">{{column.displayName}}</span>
>>> <span class="pull-right" href="#" ng-show="column.name === table.sort">
>>> <i ng-class="{'icon-chevron-down': table.dir === 'asc', 'icon-chevron-up': table.dir === 'desc'}"></i>
>>> </span>
>>> </th>
>>></tr>>>>
>>>So, I can not change the header as it's generated on the fly. I can only operate with the table's body.
>>>
>>>Here is my current code
>>>
>>>
>>><tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
>>> <td class="col-md-3">
>>> <input type="checkbox" ng-model="result.isToBePaid"
>>> data-no:dirty-check
>>> ng-change="payChange(result)" />
>>> </td>
>>> <td class="col-md-3">
>>> <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></td>
>>> <td></td>
>>> <td></td>
>>> <td>@String.Format(Labels.totalX, ":")</td>
>>> <td><span ng-class=" {'negative-amount': total('invoiceBalance') < 0}">{{total('invoiceBalance')|currency}}</span></td>
>>> <td>{{total('payment')|currency}}</td>
>>> </tr>
>>> </tfoot>
>>> </table>>>>
>>>So, I somehow need to figure out the percentages if I want to use these classes. I am going to try right now the width %.
>>
>>Permitted content for a th element is 'Zero or more td elements' - why are you using 'span' ?
>>The bootsrap grid has 12 columns - why do you have 25. (Did you actually read what I posted previously ?)
>>
>>IAC you could consider adding a 'width' or 'style' element to your column object when building the header....
>
>I am not sure I understand the 12 columns vs. 25 reference. What exactly do you mean?
>
>The span is used with ng-if directive in order to use either displayName or name (if displayName is not defined). This was an answer to my question here by Paul Mrozowski a while ago. How do you propose to add the width element? As I said, the above code is part of the generic template from directive.
>
>So, the grid is defined this way:
>
>
> <table id="searchTable" ng-show="results" class="table table-bordered table-hover table-list">
> <thead search-table-header table="table" search="search()">
>
> </thead>
>
>E.g. nothing explicitly set in the thead section and it's expanded in run-time using searchTableHeader directive:
>
>
>(function () {
> 'use strict';
>
> var app = angular.module('sysMgrApp');
>
> app.directive('searchTableHeader', [function () {
> return {
> restrict: 'A',
> replace: false,
> scope: {
> table: '=',
> search: '&',
> },
> controller: ['$scope', function ($scope) {
>
> $scope.sort = function (column) {
> if ($scope.table.sort === column.name) {
> $scope.table.dir = $scope.table.dir === 'asc' ? 'desc' : 'asc';
> } else {
> $scope.table.sort = column.name;
> $scope.table.dir = 'asc';
> }
> $scope.search();
> };
>
> }],
> templateUrl: '/app/templates/searchTableHeader'
> };
> }]);
>})();>
>and the searchTableHeader template is what I posted. How can I incorporate width into it?
Re: Bootstrap columns - read the documentation :
http://getbootstrap.com/2.3.2/scaffolding.html or just look at bootstrap.css
It uses
12 columns. Each column is 8.3%. If you have more than twelve columns in a row you will have more than 100%.
The total number of columns in your td element is 25. Don't think I can make it any clearer than that.
Re: Using span in a th element - read the documentation :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/theadIn 'Usage context' : Permitted content : Zero or more tr elements. Thus 'Span' is not valid content for a tr element.
I see nowhere where Paul suggests using a 'Span' element. Don't think I can make it any clearer than that.
Re: column sizing in header: Don't know where your table model comes from. If it has name and displayName properties can you not add a width property and set that as well?
Finally - did you run the simple html example I posted and, if so, did that show the behaviour that you expect ?
