I am currently utilizing angular 2 and focusing on css specifically within bootstrap 3. Within my code, I have two divs named leftDiv and rightDiv configured as follows:
<div class="row">
<div *ngFor="let address of addresses">
<div class="card" id="leftDiv">
<h5 class="card-text">{{address.name}}</h5>
<h5 class="card-text">{{address.street}}</h5>
<h5 class="card-text">{{address.city}}</h5>
</div>
</div>
<!-- bunch of code -->
<div class="col-md-6" id="rightDiv">
<!-- should appear at the top of current view -->
</div>
</div>
Currently, there are multiple cards with addresses displayed on the left side (leftDiv). The rightDiv only shows up upon clicking a button, one at a time. Presently, the rightDiv appears at the very top of the page which might not be visible if scrolled far down. Ideally, it should display at the top of the current view.
position: fixed;
This property fixes the rightDiv at the top of the screen, but I require it to simply appear and remain in place without that behavior. I attempted setting the position of both leftDiv and rightDiv to relative and absolute, however, this method seems to work only when one is the parent of the other, which is not feasible in my case.
Your assistance on this matter would be much appreciated.
Solution:
document.getElementById('rightDiv').style.top =
document.body.scrollTop.toString()+'px';
(Refer to Top Answer for Details)