Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Column size is ignored :(
Message
 
 
À
02/12/2014 06:06:53
Information générale
Forum:
CSS
Catégorie:
Autre
Divers
Thread ID:
01611475
Message ID:
01611687
Vues:
23
>>>In Chrome use the 'Inspect Element' (magnifying class icon - top left). This will allow you to drill down and see the areas allocated to each element. If one looks wrong then click on it an see what styles are being applied.
>>
>>I added this code
>>
>>
>><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)"  style="width: {{ column.width == undefined?100/table.columns.length:column.width }}%;">
>>        {{column.displayName == undefined || column.displayName == ''?column.name:column.displayName}}
>>        <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>
>>
>>When I inspect th elements I can see that the values I assigned are correctly displayed (e.g. 8%, 12%, 17%, 32%, 15% and 16%) but yet the appearance of the table remains the same as it was. So, looks like the style has no bearance at all.
>>
>>Interestingly, in Google Chrome that expression correctly evaluates when I run my application. In IE 11 it doesn't seem to evaluate (see attached in IE). Is this expression wrong?
>
>Also try changing your ng-repeat to something like (simplified):
<th ng-repeat="column in table.columns" ng-attr-style="width:{{(column.width === undefined) && 100/table.columns.length || column.width }}%">
>                        {{column.displayName===undefined ? column.name: column.displayName}}
>                    </th>
Looks like with the addition of the new width property and also getting rid of the one extra table (the edit form was in the table itself, not sure why) and making few other minor adjustments got me a much nicer appearance in Chrome. I haven't yet tested in other browsers but I like what I have now in Chrome and also an ease to programmatically control table's appearance using the ng-attr-style. Just wondering, is there a way to make it slightly different, e.g. if I specified width property, apply style, otherwise don't apply style at all? Right now I'm doing equal width (100/columns.count) if the width property is not supplied. I'd rather not apply style at all in this case.
If it's not broken, fix it until it is.


My Blog
Précédent
Suivant
Répondre
Fil
Voir

Click here to load this message in the networking platform