Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Column size is ignored :(
Message
 
 
General information
Forum:
CSS
Category:
Other
Miscellaneous
Thread ID:
01611475
Message ID:
01611687
Views:
25
>>>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
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform