Upon loading my homepage, it appears as follows: https://i.sstatic.net/CTlj1.png
Initially, certain rows were filled with a blue background color using ng-class, specifically "row-answered-call" as shown below:
<tr ng-repeat="item in list" ng-class="{'row-answered-call': item.state === 'active', 'row-hovered' : item.hovered, 'row-selected': item.selected," ng-mouseover="highlight(item)" ng-dblclick="goToDetails(item)">
.row-answered-call {
background-color: g-hover !important;
}
The problem arose when I switched to the next tab and replaced the Type column with user photos, causing the row height to increase. To manage this change, I used a variable (currentView) to determine which td would be rendered:
<td ng-hide="currentView === 0" style="width: 8%">
<div ng-if="item.type === CallTypes.VIDEO_CALL" class="table-group-thumb" style="background-image: url('{{item.thumbnailUrl}}')"></div>
<div ng-if="item.type === CallTypes.MESSAGE" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_MESSAGE}}" /></div>
<div ng-if="item.type === CallTypes.VOICE_CALL" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_VOICE_CALL}}" /></div></td>
<td style="width: 8%" ng-show="currentView === 0">
<i ng-class="{'icon--guardian-phone': item.type === CallTypes.VOICE_CALL, 'icon--guardian-message': item.type === CallTypes.MESSAGE, 'icon--guardian-video-call': item.type === CallTypes.VIDEO_CALL}"></i>
</td>
https://i.sstatic.net/9wZwo.png
Now, the CSS has crashed and the rows are not being filled with color correctly. I suspect this is due to the changed row height and the CSS not reloading properly afterwards. If anyone knows how to address this issue, please share some insights or ideas.
---Updated on May 8, 2017 - 11:41AM
I have combined 2 tds and switched from ng-hide/ng-show to ng-if.
<td style="width: 8%">
<div ng-if="currentView !== 0 && item.type === CallTypes.VIDEO_CALL" class="table-group-thumb" style="background-image: url('{{item.thumbnailUrl}}')"></div>
<div ng-if=" currentView !== 0 && item.type === CallTypes.MESSAGE" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_MESSAGE}}" /></div>
<div ng-if=" currentView !== 0 && item.type === CallTypes.VOICE_CALL" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_VOICE_CALL}}" /></div>
<i ng-if="currentView === 0" ng-class="{'icon--guardian-phone': item.type === CallTypes.VOICE_CALL, 'icon--guardian-message': item.type === CallTypes.MESSAGE, 'icon--guardian-video-call': item.type === CallTypes.VIDEO_CALL}"></i>
</td>
Upon inspecting the HTML code, there seems to be no issues with the tr and td elements. The background-color property contains the correct value, yet the CSS continues to malfunction as depicted in my screenshots above.
Thanks,
Ken