We Keep Coding

scrollTop behaves erratically when item to be scrolled to top is last or close to end of nested

I have a problem with scrollTop that partially works that I will try to describe. First to get it work I applied the solution found here.
I have an angular component that renders a list of nested angular components in it using *ngFor. Snippet follows (parent):
<div id="scrollable-container" class="scrollable">
<div *ngIf="isAccountsToShow" class="top-row-spacing">
<div *ngIf="accountsToggle">
<div class="grid-x ruler">
<div class="small-4 cell">
<div class="text-left sub-header">Header 1</div>
</div>
<div class="small-1 cell">
<div class="text-left sub-header">Header 2</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 3</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 4</div>
</div>
<div class="small-3 cell">
<div class="text-center sub-header">Header 5</div>
</div>
</div>
<div *ngFor="let data of displayAccounts">
<member-product
[memberNumber]="mnum"
id={{data.accountNumber}}
(scrollIntoView)="scrollToView(data.accountNumber)"
[product]="data" </member-product>
</div>
</div>
</div>
</div>
The child's html contains info on each header and in addition a ellipsis toggle at the far right that looks like this:
screenshot of a single element (Apparently I need more reputation points to fully add a screenshot. Hope it helps anyway).
The problem: everytime I click the ellipsis it will expand the account information (NOTE: this is NOT another angular nested component) to reveal even more information AND the account clicked will autoscroll to the top. screenshot of expanded widgetThis works for the first accounts considering that there might be dozens or even hundreds but will fail to scroll only for the last few and it will fail gradually, meaning that it will begin to scroll less closer to the top of its container until the very last item which will not scroll at all. Also it fails when only a few elements are displayed causing no overflow-y where the scrolling simply does not happen.
Scroll code: (I'm using event emitter here as you might have already noticed)
scrollToView(accountNumber): void {
var element = document.getElementById(accountNumber);
var topPos = element.offsetTop;
document.getElementById('scrollable-container').scrollTop = topPos - 10;
}
Css code:
.scrollable {
max-height: 24rem;
position: relative;
}
I not quite sure if this is an overflow-y related issue or what. I am completely puzzled with this.
Searching for this very particular problem in Stackoverflow yielded no results, be it angular be it jquery although it doesn't apply to my angular 2 scenario.
I appreciate any insight or help on the matter.

Every time I click on an element I get a file called jquery.mousewheel.min.js is created several times and freezes my browser

I have this code:
$(document).delegate('td','click',function(){
var stop = 0;
$('table > tbody > tr input[type="checkbox"]').click(function(event) {
var stop = 1
});
stop = this.id == "dontcompress" ? 1 : 0;
if(stop == 0){
$('[colspan="7"]').parent('tr').remove();
$(this).parents('tr').after('<tr/>').next().append('<td id="dontcompress" colspan="7"/>').children('td').append('<div/>').css('background','#fff').children().html($('#content').html());
}
});
The point of this function is to make a new row that displays some information.
This went well when I had something like this:
<div id="content" style="visibility: hidden;"> something </div>
But I am trying to make something more complex and started with this:
<div id="content" style="visibility: hidden;">
<div class="card">
<div class="card-block">
<div class="row">
<div class="form-group col-sm-3">
Something:
</div>
</div>
</div>
</div>
After this change, whenever I press on a td, it takes a few seconds to load and spawns this 2 or 3 times:
jquery.mousewheel.min.js?_=6346723525235
Where the numbers at the end seem to be randomly generated. I have no idea where it comes from.
I checked where these files are and they seem to come from this site.
I don't know why this is being loaded multiple times. When I stop using Bootstraps in the div content, these files are not loaded.
Any help?

I just found how to solve it.
<div id="content" style="visibility: hidden;">
<div class="card">
<div class="card-block">
<div class="row">
<div class="form-group col-sm-3">
Something:
</div>
</div>
</div>
</div>
</div>
I just needed to add another </div> at the end since I opened 5 divs but closed 4.
I still don't know why or how the browser kept downloading javascript files and crashing it just because I left a div out. If someone bothers to explain the reason I will accept it as answer rather than this.

How can I remove an element from a ng-repeat, but keep functionality

I'm learning Angular and struggling with something. I'm using a tinder-like library that lets you swipe images left or right. I also have a heart and "X" that will do the same thing.
What's happening is when you swipe left/right, the heart and "X" are being swiped too. I need these to remain stationary. I'm not sure how to do that and still have them render and function normally.
Here's the HTML code:
<div class="ng-swippy noselect">
<div person="person" swipe-directive="swipe-directive" ng-repeat="person in peopleToShow" class="content-wrapper swipable-card">
<div class="card">
<div style="background: url({{person.thumbnail}}) no-repeat 50% 15%" class="photo-item"></div>
<div class="know-label">{{labelOk ? labelOk : "YES"}}</div>
<div class="dontknow-label">{{labelNegative ? labelNegative : "NO"}}</div>
</div>
<div class="container like-dislike">
<div class="circle x" ng-click="$parent.$parent.clickDisike()"></div>
<div class="icon-like" ng-click="$parent.$parent.clickLike()"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div><!-- end person-->
If I move the like-dislike container out of the person div, 2 things happen. That container does not render on screen and even if it does, it throws an error.
How can I keep them stationary and keep their functionality as it relates to the app/image they represent?
Thanks in advance.
****EDIT****
Link: http://430designs.com/xperience/black-label-app/deck.php

Try using this css for like-dislike element and place it above the person div
.like-dislike {
position : 'absolute',
top : 10px;
right : 10px;
}

I ended up just removing the $parent.$parent from my ng-click.

Angular ng-click ordering

New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/
From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?
<div id="buttons" class="row">
<div class="col-sm-6 col-md-4">
a-z
</div>
<div class="col-sm-6 col-md-4">
Country/State
</div>
<div class="col-sm-6 col-md-4">
type of attraction
</div>
</div>
<article>
<div class="row">
<div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
<div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
<h2 ng-show="villa">{{selfieObj.country}}</h2>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
<div class="caption">
<h3>{{selfieObj.attraction}}</h3>
<p class="text-center">
{{selfieObj.answer}} {{selfieObj.info}}
</p>
</div>
</div>
</div>
</div>
</div>
</article>
EDIT:
https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.
To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.

The sorting seems to work fine in your fiddle, so is this just a visual issue?
Just remove the initial states from the buttons:
class="btn btn-primary btn-block"
instead of adding active or inactive by default.
I have forked your fiddle with the fix: fiddle

why iview slider automatic decrease height of iview-caption div after one slide

iview slider automatically decreases the .iview-caption div height after every slide and thats why my content cut last line. Please anybody Solve this problem.
Here is Code:-
<div id="iview">
<div data-iview:thumbnail="slider/img/photo1.jpg" data-iview:image="slider/img/photo2.jpg">
<div class="iview-caption" data-x="130" data-y="50" data-transition="expandRight">
Can’t decide if you hate your job or your boss more?
</div>
<div class="iview-caption caption1" data-x="0" data-y="40" data-transition="fade" data-speed="2000">
<span>Thinking of changing jobs? <strong>Register here</strong> for exciting new job opportunities with Staffing.</span></div>
</div>
<div data-iview:thumbnail="slider/img/photo2.jpg" data-iview:image="slider/img/photo1.jpg">
<div class="iview-caption" data-x="130" data-y="50" data-transition="expandRight" >
Research shows that 78% of resumes are misleading.
</div>
<div class="iview-caption caption1" data-x="0" data-y="40" data-transition="fade" data-speed="2000">
<span>Want to find the other 22%? We’ve already done that for you.</span>
</div>
</div>
</div>
</div>